webpack学习（五）：webpack4+压缩和提取CSS以及提取公共部分

提取：mini-css-extract-plugin

what？

在过去，如何将 CSS 提取到一个文件中这是 extract-text-webpack-plugin 的工作。不幸的是这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法：extract-text-webpack-plugin 的维护已经成为了一个很大的负担，这已经不是第一次因为它的问题，而使升级 webpack 主版本变的而复杂和繁琐。
而在webpack 4+版本我们可以使用mini-css-extract-plugin 插件来解决这些问题。

use？

首先通过运行npm命令进行安装

npm install mini-css-extract-plugin --save-dev

接下来，我们需要在webpack的配置文件中引入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

然后在scss等样式相关的rules中使用它：

{
   //解析.scss文件
    test: /\.(sa|sc|c)ss$/,
    use: [
        'css-hot-loader',
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
    ]
}

最后，我们需要在plugins中使用

    new MiniCssExtractPlugin({
    　　filename: "./css/[name].css"                     // 提取出来的css文件路径以及命名
    }),

值得一提的是，最好将mini-css-extract-plugin用于生产模式，因为该插件使用目前会导致HMR功能缺失。因此在平常的开发模式中，我们还是使用style-loader。
保存之后运行npm run build，会发现打包后文件夹已经帮我们把css提取出来：

到这里我们发现一个问题，结合之前的devtool和devServer以及现在的提取插件，我们会发现在开发模式和生产模式下，我们的webpack配置会有所不同，因此，我们大可将开发模式和生产模式的webpack配置分成两个文件来使用，例如：

当然，如果对配置文件命名进行修改，我们需要对package.json文件中的build和dev命令进行修改，通过–config引导命令读取相应的配置文件：

  "build": "webpack --progress --config ./config/webpack.prod.js",
   "dev": "webpack-dev-server --open --hot --progress --config ./config/webpack.dev.js"

压缩：optimize-css-assets-webpack-plugin

what?

optimize-css-assets-webpack-plugin用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css（默认情况下，它使用cssnano，但可以指定自定义CSS处理器）
它解决了extract-text-webpack-plugin css重复问题：由于extract-text-webpack-plugin仅捆绑（合并）文本块，如果它用于捆绑css，则捆绑包可能具有重复的条目

use？

同上述插件一样，该插件也是需要安装和引入，不再累赘叙述。完成后，我们进行如下使用：

    new OptimizeCssAssetsPlugin({
         assetNameRegExp: /\.css$/g,       //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
         cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
         cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
         canPrint: true                    //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
    }),

保存，运行build命令，会发现打包后的css文件已被压缩

提取公共部分：optimization

what？

当我们在编写多入口文件的项目时，难免在不同的入口文件会有相同的部分（比如说存在部分相同的样式，使用了相同的组件，使用了公共样式等等），因此我们需要在打包过程中提取公共的部分并独立开来。
在之前版本的webpack中，我们可以使用CommonsChunkPlugin 进行提取，而在webpack4+版本，CommonsChunkPlugin 已经从 webpack v4 legato 中移除，webpack 4+ 版本使用内置的 SplitChunksPlugin 插件来进行公共部分的提取

use？

因为 SplitChunksPlugin 是 webpack 4+ 版本内置的插件, 所以无需安装, 只需在 webpack.config.js 中配置：

    plugins: [
    	// ...
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'commons',    //提取出来的文件命名
                    chunks: 'initial',  //initial表示提取入口文件的公共部分
                    minChunks: 2,       //表示提取公共部分最少的文件数
                    minSize: 0          //表示提取公共部分最小的大小
              }
          }
      }
  }

保存，使用插件之后运行build命令打包结果如下：

可以看到，webpack帮我们把js和css中公共的部分提取出来并放置命名为commons的文件中（如图中的commons.js和commons.css）。本次学习和练习到这里告一段落~~~~