多入口配置

基本过程

1、建立多个entry

entry: {
  index: path.resolve(__dirname, '../src/index.js'),
  other: path.resolve(__dirname, '../src/other.js')
}

2、output的filename设置【防止重名】

output: {
  filename: '[name].[contentHash:8].js',【防止重名】
  path: path.resolve(__dirname, '../dist')
}

3、使用HtmlwebPackPlugin配置多入口【chunks属性重要】

plufins: [
// 如果不写chunks属性，会把entry中配置的文件都给引入
  new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../src/index.html'),
        filename: 'index.html',
        chunks: ['index'] // 只引用index.js【表示该页面需要引入哪些 chunk , 对应上面的entry】
  }),
  new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../src/other.html'),
        filename: 'other.html',
        chunks: ['other'] // 只引用other.js【表示该页面需要引入哪些 chunk , 对应上面的entry】
  })
]

总结

1、在entry中配置多个入口

2、在output中的filename使用hash占位符确保文件名不冲突

3、使用多个HtmlWebpackPlugin去生成多个html，需要注意chunks属性的配置

CleanWebpackPlugin可以用于打包前清空已存在的打包目录