webpack多入口多出口(多端多应用)

多入口

• 通过entry字段配置入口，例如

{
  page1: './src/page1.js',
  page2: './src/page2.js'
}

多出口，使用html-webpack-plugin，有多少的出口就配置实例化多少个，同时通过chunks字段表示将那些chunk引入

new HtmlWebpackPlugin({
      filename: 'page1.html',
      template: 'page1.html',
      inject: true,
      title: 'page1',
      chunks: ['page1','ventor'],
      templateParameters: {
        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      },
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html',
      template: 'page2.html',
      inject: true,
      title: 'page2',
      chunks: ['page2','ventor'],
      templateParameters: {
        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      },
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    })

多出口的分包，主要借助optimization.splitChunks

1. 首先这两页面使用公共包有vue和vuex，所以这要拆分成公共包
2. page1使用了echart,page2没有使用，所以page2不要引入不相关的包
3. 同时要结合html-webpack-plugin的chunks或者excludeChunks来表示包含或者排除那些chunk
4. 最后就是要对runtime的js拆分，不同的出口引入不同runtime运行代码，此处通过runtimeChunk设置为true或则multiple，详情可见webpack官网文档

optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        ventor: {
          name: 'ventor',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // 只打包初始时依赖的第三方
        },
        echart: {
          name: 'chunk-echart',
          test: /[\\/]node_modules[\\/]echart[\\/]/,
          priority: 20, // 权重要ventor的权重高，优先级要更高，不然就打到ventor里面了
        }
      }
    },
    runtimeChunk: true,
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          mangle: {
            safari10: true
          }
        },
        sourceMap: config.build.productionSourceMap,
        cache: true,
        parallel: true
      })
    ]
  }

开发环境，config.dev.js配置

1. 开发环境，只开放一个入口一个出口，通过入口配置文件来控制，例如：

module.exports = {
    page1: './src/page1.js',
    page2: './src/page2.js'
}

1. 通过入口配置文件来控制出口，即控制实例化多少个html-webpack-plugin, 由于出口的html名字不同，所以要根据入口动态配置下devServer的首页html， 即devServer.index = 'index.html' // 默认

借鉴的文档：

webpack

富图团队

知乎

分包