Webpack4配置代码分割

webpack打包优化

在webpack配置文件中加入以下代码

/*chunks设置成all表示不管是同步加载还是异步加载模块，都进行代码的分割
其它选项一般不用配置，代表使用默认配置*/
optimization: {
    splitChunks: {
      chunks: 'all'
    }
 }

css代码分割需要安装mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
{
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, /*之前是style-loader*/
          {
            loader: 'css-loader',
            options: {
              importLoader: 1 
            }
          },
          'postcss-loader' 
        ]
 }
plugins: [
  new MiniCssExtractPlugin({
   filename: '[name].css'
  })
]

不过MiniCssExtractPlugin不支持热更新，可以设置环境变量，让开发环境不使用这个plugin