我创建了一个使用 bootstrap 4 和 fontawesome 的 webpack 配置。它有多个入口点并同时处理多个 html 页面。
对于那些好奇的人,我也创建了我的工作流程存储库:
github
它工作正常,我对输出感到满意。困扰我的是它的速度。工作流程非常慢,我无法弄清楚。一旦我更改了一些文件,CPU 使用率就会达到 100%。
这是我的 webpack 配置文件:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
home: './src/js/home.js',
login: './src/js/login.js',
signup: './src/js/signup.js',
},
output: {
filename: 'js/[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
filename: 'home.html',
template: 'src/home.html',
chunks: ['home'],
inject: false
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: 'src/login.html',
chunks: ['login'],
inject: false
}),
new HtmlWebpackPlugin({
filename: 'signup.html',
template: 'src/signup.html',
chunks: ['signup'],
inject: false
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "[id].css"
}),
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [{
test: /\.(png|jp(e*)g|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]',
publicPath: '/'
}
}]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"resolve-url-loader",
"sass-loader"
]
},
]
},
};