复习webpack4之CSS文件代码分割

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1. MiniCssExtractPlugin

可以利用这个插件对css进行代码分割。

注：补充一个知识点，在output中可以配置chunkFilename，这个是对间接引用的js文件进行命名，稍后会用到。

首先安装插件cnpm install --save-dev mini-css-extract-plugin。

安装完成后，在webpack.config.js中引入插件，并在plugins中初始化。

然后配置module，把所有的style-loader替换为MiniCssExtractPlugin.loader，其他配置项不变。

进行打包，dist目录中就有了CSS文件。

如果此时打包的文件没有css，有可能是因为tree Shaking中，package.json没有设置sideEffects。

2. MiniCssExtractPlugin参数

与js相同，页面直接引用的css命名规则是filename，而间接引用的css命名规则是chunkFilename。

3.MiniCssExtractPlugin其他用法

如果我们引入两个css文件，MiniCssExtractPlugin会把他们打包到一个文件中。

如果想压缩css代码，需要安装一个插件 optimize-css-assets-webpack-plugin。

首先安装cnpm install --save-dev optimize-css-assets-webpack-plugin

然后引入插件。

然后在optimization.minimizer初始化插件。

运行打包命令，发现css代码已经被压缩合并了。

插件底层也借助了splitChunksPlugin，如果css有多个入口，也可以通过cacheGroups来分割合并css代码。

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true // 强制忽略minChunks等设置
        }
      }
    }
}
复制代码

多入口js中，如果想让各个js中引入的css打包到对应的css文件中，需要这样配置。

optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') => // foo入口下的css打包到foo.css中
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') => // bar入口下的css打包到bar.css中
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true
        }
      }
    }
}
复制代码

转载于:https://juejin.im/post/5cd42fb6e51d453a3a0acb80