Webpack高級配置「二」-- 配置多入口

1.js文件 多入口配置：

在公共配置中配置多入口
[webpack.common.js]:

entry: {
  index: path.join(srcPath, 'index.js'),
  other: path.join(srcPath, 'other.js')
},

生產環境配置多出口
[webpack.prod.js]：

output: {
  // filename: 'bundle.[contentHash:8].js',  // 單入口配置打包代碼時，加上 hash 戳
  filename: '[name].[contentHash:8].js', // name 即多入口時 entry 的 key ：index 、other
  path: distPath,
},

2.生成多個html文件

針對上述配置的多入口js文件，分別生成多個html文件

在公共配置中配置：
[webpack.common.js]:

plugins: [
 //單入口時 生成index.html
  // new HtmlWebpackPlugin({
  //     template: path.join(srcPath, 'index.html'),
  //     filename: 'index.html'
  // })

  // 多入口 - 生成 index.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    // chunks 表示該頁面要引用哪些 chunk （即上面的 index 和 other），默認全部引用
    chunks: ['index'] // 只引用 index.js
  }),
  // 多入口 - 生成 other.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other'] // 只引用 other.js
  })
]