這樣一個最基本的單頁面的配置文件如下：
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 的文章
