mini-css-extract-plugin插件快速入门

前言

webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点：

image.png
更多介绍请看移步：https://webpack.docschina.org/plugins/extract-text-webpack-plugin/

webpack 4.0以后，官方推荐使用extract-text-webpack-plugin插件来打包css文件。

使用方法

把所有配置文件放到项目的根目录下，运行package.json中的命令即可。当然，webpack的入口、出口等基础配置还需自行参照官网文档完成配置。

为了更贴近实际应用场景，本次采用三个配置文件，分别讲解它们的配置以及注意事项。

webpack.common.js (公共配置文件)

• 开发环境和生产环境共用的配置，借助webpack-merge插件，可以merge到开发或生产环境，从而减少重复配置。
• 引入了Node环境变量process.env.NODE_ENV，可以根据传入的环境参数，动态更改配置，具体请看代码。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
              // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
              publicPath: './',  
              // publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
              hmr: devMode, // 仅dev环境启用HMR功能
            },
          },
          'css-loader',
          'sass-loader'
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 这里的配置和webpackOptions.output中的配置相似
      // 即可以通过在名字前加路径，来决定打包后的文件存在的路径
      filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
      chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
    })
  ]
}

webpack.dev.js（dev环境的配置文件）

• dev环境的配置，记得把mode设置为development模式，否则webpack4会默认为production模式。

const merge = require('webpack-merge')
const common = require('./webpack.common')
const webpack = require('webpack')

module.exports = merge(common, {
  mode: 'development'
})

webpack.prod.js（生产环境的配置文件）

• 生产环境的配置，默认开启tree-shaking和js代码压缩；
• 通过optimize-css-assets-webpack-plugin插件可以对css进行压缩，与此同时，必须指定js压缩插件（例子中使用terser-webpack-plugin插件），否则webpack不再对js文件进行压缩；
• 设置optimization.splitChunks.cacheGroups，可以将css代码块提取到单独的文件中。

const path = require('path')
const merge = require('webpack-merge')
const common = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = merge(common, {
  mode: 'production', 
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      }
    },
  }
})

package.json配置文件

• sideEffects： 生产环境打包的时候，会默认开启tree-shaking，如果不设置sideEffects，某些通过import方式引入的css文件可能不会被打包，因为tree-shaking会甩掉引入后未使用的代码。通常，css文件一般都是引入就好，很少使用里面的方法或变量，所以很容易被webpack认为是没有用的代码，从而不会被打包。所以，不希望被tree-shaking的文件，请在sideEffects中配置与之匹配的正则表达式。
• NODE_ENV： 由于项目中用到了Node的环境变量，所以打包时需通过NODE_ENV传入环境变量。这里的配置在macOS操作是没有问题的，Windows系统的小伙伴，可以安装一个叫cross-env的npm包，使用方法略。

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.sass"
  ],
  "scripts": {
    "build": "NODE_ENV=production webpack --config webpack.prod.js --progress", // 生产环境打包
    "dev": "NODE_ENV=development webpack --config webpack.dev.js --progress", // dev环境打包
  },
}

总结

• 不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。
• mode: 'production'会开启tree-shaking和js代码压缩，但配置optimization. minimizer会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。
• mini-css-extract-plugin插件，结合optimization.splitChunks.cacheGroups配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和chunkFilename）。

官方文档: https://webpack.js.org/plugins/mini-css-extract-plugin/

如有错误，欢迎在评论区指正或私聊我，谢谢！