阅读 186

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

前言

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

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

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文件,且可以设置存放路径(通过设置插件的filenamechunkFilename)。

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

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

关注下面的标签,发现更多相似文章
评论