1.打包多页应用
多个entry打包多个页面为例
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
other: './src/other.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['index', 'other']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'other.html',
chunks: ['other']
})
]
}
首先output的filename中，用变量name打包不同的js，创建各自依赖关系。然后插件“html-webpack-plugin插件的参数中，字段chunks指定打包后的html文件该引用哪个JS文件”
2.配置sourceMap
生产环境中生成的代码已经被压缩，报错后很难定位。webpack支持sourceMap（源码映射），可以很方便的解决此类烦恼。代码如下：
module.exports = {
mode: 'development',
entry: {
index: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
//你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。
devtool: 'source-map', // 会多生成一个.map文件，因此打包和构建速度可能会略慢。常见的还有‘eval-source-map’，调试时与source-map方式基本没区别，只是不会生成.map文件。还有多种sourceMap方式，具体用法自行测试
module: {
rules: [
...
...
}
4.watch的用法
watch提供了和webpack-dev-server中的“hot”字段类似的功能，只是它是实时打包，"hot"是实时刷新。watch还有自己的配置项(和watch同级，字段名为watchOption)。
output: {
...
},
devServer: {
...
},
watch: true,
watchOptions: {
poll: 1000, // 每秒查询1000次
aggreatement: 500, // 防抖，节流
ignored: /node_modules/ //不需要监控的文件
},
