webpack 配置多文件

• 1 基础 webpack 入口 配置

module.exports = {
  entry: {
    'page1': './src/pages/page1/app.js', // 页面1
    'page2': './src/pages/page2/app.js', // 页面2
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name]/[name]-bundle.js', // filename不能写死，只能通过[name]获取bundle的名字
  }
}

• 2 配置多个HtmlWebpackPlugin 生成多个html文件

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(
    {
      template: './src/pages/page1/index.html',
      chunks: ['page1'],
    }
  ),
  new HtmlWebpackPlugin(
    {
      template: './src/pages/page2/index.html',
      chunks: ['page2'],
    }
  ),
  ]
}

HtmlWebpackPlugin一定要配 chunks，否则所有页面的js都会被注入到当前html里

• 3 代码分割(配置optimization即可)
  • 把多个页面共用的第三方库单独打包出一个vendor.js
  • 把多个页面共用的逻辑代码和共用的全局css(比如css-reset,icon字体图标)单独打包出common.js和common.css
  • 把运行时代码单独提取出来manifest.js
  • 把每个页面自己的业务代码打包出page1.js和page1.css

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 打包业务中公共代码
        common: {
          name: "common",
          chunks: "initial", // 共享的代码
          priority: 0, // 优先级
          minChunks: 2, // 同时引用了2次才打包
        },
        // 打包第三方库的文件
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial",
          priority: 10,
          minChunks: 2, // 同时引用了2次才打包
        }
      }
    },
    runtimeChunk: { name: 'manifest' } // 运行时代码
  }
}

多页面打包的原理就是：配置多个entry和多个HtmlWebpackPlugin

optimization 参考