Errors Using Webpack and Bootstrap Together
I've been banging my head on this several times over the course of a few days, so apologies if this is a simple fix. I am new to Webpack.
I want to import Bootstrap into my project instead of using CDN or any other method. But I have two questions:
- Bootstrap not showing on page
- I am having problems loading .woff and .woff2 glyphicons.
I will have my code below and it will show you where I am. Thanks for the help in advance!
File tree (left files left 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 requested the error logs, so they are included below:
Chrome debug error:
Fault Error: Parse error: C: \ Users \ {user} \ Code \ ref-data mapper \ node_modules \ boot \ DIST \ Fonts \ glyphicons-halflings-regular.woff2 Unexpected symbol
Webpack error:
Mistake in. /~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff Parse error: C: \ Users \ {user} \ Code \ ref-data mapper \ node_modules \ bootstrap \ DIST \ Fonts \ glyphicons-halflings-Regul r .woff Unexpected character '' (1: 4) You may need a loader to handle this type of file. (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
Mistake in. /~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 Parse error: C: \ Users \ {user} \ Code \ ref-data mapper \ node_modules \ bootstrap \ DIST \ Fonts \ glyphicons-halflings-Regul r .woff2 Unexpected character '' (1: 4) You may need a loader to handle this type of file. (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
source to share
Thanks to @InfiniteStack and the Gitter team at webpack / webpack, I now have a complete answer.
In webpack.config.js does it require a url-loader link with only url-loader before modifying them ? limit100000.
In addition, jQuery needed to be defined as a plugin in the webpack at the bottom. All changes must be made in webpack.config.js. My completed file will be below:
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|woff|woff2|eot|ttf|svg)$/,
use: 'url-loader?limit=100000'
},
{
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'
}
]
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
};
module.exports = config;
So TL; DR: Define jQuery as a plugin Before adding additional features
define all your non-js assets with url-loader.If anyone else has more answers regarding WHY this works, I am open to him if you want PM / message me.
Thanks again!
source to share