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

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

更多介绍请看移步： webpack.docschina.org/plugins/ext…

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

使用方法

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

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

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

webpack-merge
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环境打包
  },
}
复制代码