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…

若有錯誤，歡迎在評論區指正或私聊我，謝謝！