I've been pounding my head against this one for a few days, so apologies if this is a simple fix. I'm new to Webpack.
I'm looking to import Bootstrap into my project instead of using a CDN or any other method. But I have two issues occurring:
- Bootstrap isn't rendering on the page
- I keep having issues trying to load the .woff and .woff2 glyphicons
I'll have my code below and that will show you where I'm at. Thanks for the help in advance!
File Tree (Left files out for clarity):
-node_modules
-src
--index.html
--app
---vendor.jsx
--build
---app.js
---vendor.js
-webpack.config.js
index.html
<body>
<!-- Insert other Body code here -->
<!-- Webpack Bundle -->
<script src="build/vendor.js"></script>
<script src="build/app.js"></script>
</body>
vendor.jsx
// JS dependencies
const $ = require('jquery');
const bootstrap = require('bootstrap');
import React from 'react';
import ReactDOM from 'react-dom';
// CSS files
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, './src/build');
var APP_DIR = path.resolve(__dirname, './src/app');
var config = {
entry: {
app: APP_DIR + '/app.jsx',
vendor: APP_DIR + '/vendor.jsx'
},
output: {
path: BUILD_DIR,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.png$/,
use: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
}
};
module.exports = config;
EDIT:
@InfiniteStack asked for error logs, so they are included below:
Chrome Debug Error:
Uncaught Error: Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.woff2 Unexpected character '
Webpack Error:
ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regula r.woff Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4707-4760 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx
ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 Module parse failed: C:\Users\{user}\Code\ref-data-mapper\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regula r.woff2 Unexpected character ' ' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4622-4676 @ ./~/bootstrap/dist/css/bootstrap.css @ ./src/app/vendor.jsx