本文摘要：主要通過實操講解運用Webpack 5 CSS常用配置的方法步驟
本文摘要：主要通過實操講解運用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 标簽加載樣式。
插件官網：https://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 的相容性。官網：https://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 檔案。
官網：https://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）學習結束，期待關注留言分享~~