在Webpack 5 中如何進行 CSS 常用配置？

2022 年 7 月 27 日
筆記
VUE, webpack 5, 前端

本文摘要：主要通過實操講解運用Webpack 5 CSS常用配置的方法步驟

前文已談到可以通過配置 css-loader 和 style-loader，使 webpack5 具有處理 CSS 資源的能力。css-loader 首先會分析出各個 CSS文件之間的關係，把各個CSS文件合併為一大段 CSS，然後將 CSS 文件編譯為 CommonJS 模塊，並把該模塊引入到 JS 中。緊接着 style-loader 會從 JS 中提取出剛才引入的編譯後的 CSS，在頁面的 header 中創建 style 標籤，並插入該css。

1 提取 CSS 文件

上述配置打包後的資源，在瀏覽器中運行時，首先會加載 JS 文件，之後才會創建 style 標籤來插入樣式，很多情況下會出現閃屏現場，導致用戶體驗不好。這時候可通過配置 mini-css-extract-plugin 插件來提升用戶體驗，該插件可以提取出獨立的 CSS 文件，通過 link 標籤加載樣式。

插件官網：//webpack.js.org/plugins/mini-css-extract-plugin/

1.1 安裝依賴

安裝 mini-css-extract-plugin 為開發依賴：

yarn add mini-css-extract-plugin -D

1.2 修改 webpack 配置

修改 webpack.config.js 文件：

1）引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

2）修改 loader 配置：將 module.rules 中所有 style-loader 替換為該插件提供的loader：MiniCssExtractPlugin.loader，如：

//...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    },
    {
      test: /\.s[ca]ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ]
    },
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader',
      ]
    },
    {
      test: /\.styl$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'stylus-loader'
      ]
    },
//...
  ]
},
//...

3）添加插件配置：在 plugins 中添加該插件

  plugins: [
// ...
    new MiniCssExtractPlugin({
      filename: 'css/index.css'
    })
  ],

1.3 測試運行

執行 yarn build 打包，打包成功後：

1）查看輸出目錄 dist，該目錄中新增了 css/index.css

2）在瀏覽器中運行 dist/index.html，在 Elements中可看到 link 標籤引入 css/index.css 文件:

2 CSS 兼容性處理

由於瀏覽器碎片化嚴重，需要進行 CSS 兼容性的處理。如果手動編寫各種兼容樣式，工作量較大，可使用 postcss-loader 來實現 CSS 的兼容性。官網：//webpack.js.org/loaders/postcss-loader/#autoprefixer

2.1 安裝依賴

postcss-loader 依賴於 postcss。post-css 有大量的配置，我們可以使用它的預設 postcss-preset-env，該預設包括了 autoprefixer等。

yarn add postcss-loader postcss postcss-preset-env -D

2.2 修改 webpack 配置

1）在 webpack.config.js 中定義通用的 postcss-loader 配置：

const commonPostcssLoader = {
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        'postcss-preset-env'
      ]
    }
  }
}

2）在每個css相關的loader配置中添加上面定義的loader。注意，上面定義的 commonPostcssLoader 需要在 css-loader 之前執行，在 css 預處理器的loader（sass-loader / less-loader / stylus-loader）之後執行：

  rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          commonPostcssLoader
        ]
      },
      {
        test: /\.s[ca]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          commonPostcssLoader,
          'sass-loader',
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          commonPostcssLoader,
          'less-loader',
        ]
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          commonPostcssLoader,
          'stylus-loader'
        ]
      },
// ...
    ]

2.3 添加 .browserslistrc 文件

在項目根目錄下創建 .browserslistrc 文件，該文件告訴 postcss-loader 需要支持的瀏覽器。可以在控制台中執行命令 npx browserslist 查看瀏覽器版本：

在實踐中，.browserslistrc 我通常寫如下內容：

> 1%
last 10 version
not dead

上述配置表示：佔有率大於1%、並且最新的10個版本、並且存在的瀏覽器。

為了測試 CSS 兼容性，此處暫時將該文件內容修改為佔有率大於0.001：

> 0.001%

2.4 測試運行

1）在 src/style/css/css-demo.css 文件中添加一個需要兼容性處理的 css 代碼：

h1 {
  border-radius: 10px;
}

2）執行打包命令 yarn build （對應為 webpack 命令）

3）打包成功，查看生成的 dist/css/index.css 文件，可發現做了兼容性處理：

3 CSS 壓縮處理

上面打包後提取出來的 index.css 並沒有進行壓縮，通常在生產環境盡量要壓縮文件。webpack 提供了插件 css-minimizer-webpack-plugin 壓縮 CSS 文件。

官網：//webpack.js.org/plugins/css-minimizer-webpack-plugin

3.1 安裝依賴

yarn add css-minimizer-webpack-plugin -D

3.2 修改 webpack 配置

1）引入插件

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

2）在 plugins 中添加插件

  plugins: [
// ....
    new CssMinimizerWebpackPlugin()
  ],

3.3 測試運行

執行打包命令 yarn build，查看打包生成的 dist/css/index.css 文件，可看到該文件已經被壓縮。

今日優雅哥（youyacoder）學習結束，期待關注留言分享~~

Tags: VUE webpack 5 前端