这样一个最基本的单页面的配置文件如下：
const path = require('path');
module.exports = {
//入口文件的配置项
entry: {
entry: './src/entry.js'
},
//出口文件的配置项
output: {
//输出的路径，用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: 'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module: {},
//插件，用于生产模版和各项功能
plugins: [new HtmlWebpackPlugin({
minify:{
removeAttributeQuotes: true,
collapseWhitespace: true
},
template: './src/index.html'
})]
//配置webpack开发服务功能
devServer: {}
}
多入口配置
多入口配置的时候只需要在entry中多增加一个入口文件
输出文件的时候将filename的值修改为[name].js，作用是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个出口文件
同时将定义多个HtmlWebpackPlugin插件，有几个页面就配置几项
module.exports = {
entry: {
client1: './src/client1/client1.js',
client2: './src/client2/client2.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'client1',
filename: 'client1.html',
template: 'src/client1/client1.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new HtmlWebpackPlugin({
title: 'client2',
filename: 'client2.html',
template: 'src/client2/client2.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
],
};
閱讀更多 Farmer001 的文章
