抽离公共文件

有的时候需要把公共的代码抽离出来,单独打包成一个文件

module.exports = {
  optimization: {
    splitChunks: {
          cacheGroups: {
            common: {
              minChunks: 2,
              chunks: 'initial',
              minSize: 0
            }
      },
  },
 }
  • cacheGroups:缓存组
  • minChunks:被引用多少次才进行抽离
  • chunks:选择哪些块进行优化,可以是all,async,initial
  • minSize:要生成的块的最小大小

抽离第三方代码库

splitChunks: {
      cacheGroups: {
        vendor: {
          test:/node_modules/,
          minChunks: 2,
          chunks: 'initial',
          minSize: 0,
          name:"common"
        },
        common: {
          minChunks: 2,
          chunks: 'initial',
          minSize: 0,
          name:"common"
        }
      },


    }
  • vendor就是第三方组件库了

引用

new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunks: ['index',"common"]
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunks: ['about',"common"]
    }),
    new HtmlWebpackPlugin({
      title: '首页',
      minify: false,
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      chunks: ['index',"common"]
    }),
    new HtmlWebpackPlugin({
      title: '关于',
      minify: false,
      filename: 'about.html',
      template: path.resolve(__dirname, 'src/about.html'),
      chunks: ['about',"common"]
    })
  • 在chunks加入缓存组的名字就可以了
更新修改时间: 7/19/2019, 10:12:03 AM