Webpack配置多入口

我们平常一般都是用Webpack来配置单页面应用，但是有些特殊情况下需要多个页面来实现，Webpack是支持我们来打包多页面的，下面就来说一下配置方法吧：

第一步： 更改Webpack.config.js中的 entry配置

entry: {
  app: './src/index.js',
  print: './src/print.js'
},

第二步：更改 output的配置，以支持多文件输出

output: {
  filename: "[name].bundle.js",
  path: path.resolve(__dirname, "dist")
},

第三步： 增加HtmlWebpackPlugin插件

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'First Page',
      filename: 'first.html',
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'Second Page',
      filename: 'second.html',
      chunks: ['print']
    })
  ]

如果有多个页面就增加多个HtmlWebpackPlugin插件

chunks 用来配置打包后的html页面中引用哪些资源，对应的也就是entry中配置的key

运行打包命令后应该能在dist目录中看到 2个html页面，并且first.html中引入了app.bundle.js，second.html中引入了print.js 这样我们就实现了Webpack的多页打包输出