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之后，官方推荐使用mini-css-extract-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）。

官方文档: webpack.js.org/plugins/min…

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