【專項學習】 —— Webpack5基礎配置詳細教程學習（三）
阿新 • • 發佈：2022-03-04
一、提取css成單獨檔案
1、先用以往的開發模式來打包。建立以下資料夾，build裡的內容是打包後生成的。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
index.js
import '../css/text1.css'; import '../css/text2.css'
webpack.config.js
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules:
[
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlwebpackPlugin(
{
template: './index.html'
}
)
]
}
text1.css
#box1 {
width: 100px;
height: 100px;
background-color: pink;
}
text2.css
#box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
2、隨後開啟終端輸入：
npm init webpack_css_code npm i webpack webpack-cli -D npm i css-loader style-loader -D npm i html-webpack-plugin -D
3、在下載好相關包後，開啟package.json，修改內部的scripts程式碼。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
4、然後終端輸入：
npm run dev
5、最後開啟build資料夾下生成的index.html檢視效果
那麼此時我們使用傳統的手法打包成功了。
開啟生成的built.js發現，之前的css樣式被寫在了這裡面，現在想提取出來，使成為單獨的檔案。
6、下載外掛npm i mini-css-extract-plugin -D
7、然後修改webpack.config.js內的程式碼，使用該外掛：
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules:
[
{
test: /\.css$/,
use:
[
// 建立style標籤，將樣式放入
// 'style-loader',所以想提取css成單獨檔案時，這裡不能把css樣式放入
// 使用下邊的外掛進行取代，提取js中的css成單獨檔案
MiniCssExtractPlugin.loader,
// 將css檔案整合到js檔案中
'css-loader'
]
}
]
},
plugins: [
new HtmlwebpackPlugin(
{
template: './index.html'
}
),
new MiniCssExtractPlugin(
{
// 對輸出的檔案重新命名
filename: 'built.css'
}
)
]
}
8、那麼此時，執行npm run dev，build資料夾下有一個built.css生成。
同文件夾下的index.html引入樣式的方法變為了通過link標籤引入。
最後在開啟index.html檢視效果。
二、css的相容性處理
1、將上一節程式碼全部複製過來，重新命名。
然後只修改config配置。
css相容性處理: postcss --> 需要外掛postcss-loader 、postcss-preset-env。
終端中輸入下述命令下載。
npm i postcss-loader postcss-preset-env -D
2、webpack.config.js程式碼
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 設定node.js環境變數，使其預設是處於開發環境development，不是生產環境
process.env.NODE_ENV = 'development'
module.exports = {
entry: './js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules:
[
{
test: /\.css$/,
use:
[
// 建立style標籤，將樣式放入
// 'style-loader',所以想提取css成單獨檔案時，這裡不能把css樣式放入
// 使用下邊的外掛進行取代，提取js中的css成單獨檔案
MiniCssExtractPlugin.loader,
// 將css檔案整合到js檔案中
'css-loader',
//css相容性處理: postcss --> 外掛postcss-loader 、postcss-preset-env
//這些外掛幫postcss找到package.json中browserslist裡面的配置，通過配置載入指定的css相容性樣式
//使用loader的預設配置
//"postcss-loader',
//修改loader的配置
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')()]
}
}
}
]
}
]
},
plugins: [
new HtmlwebpackPlugin(
{
template: './index.html'
}
),
new MiniCssExtractPlugin(
{
// 對輸出的檔案重新命名
filename: 'built.css'
}
)
]
}
3、在pachage.json中修改browserslist配置。
其中browserslist的development部分表示相容最近一個版本的瀏覽器，production中表示相容百分之99.8的瀏覽器，不要相容已經停用的瀏覽器。
{
"name": "webpack_css",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.1.0",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
4、修改text1.css的內容，增加新樣式。
#box1 {
width: 100px;
height: 100px;
background-color: pink;
/* 增加兩個在特定瀏覽器有相容性問題的樣式 */
display: flex;
backface-visibility: hidden;
}
5、隨後輸入npm run dev。
開啟生成的build資料夾下的built.js，發現對剛剛新增加的兩個樣式做了相容處理。
三、壓縮css
1、複製上一節全部程式碼，在基礎上進行修改。
壓縮css需要引入一個外掛css-minimizer-webpack-plugin。
2、終端輸入命令npm i css-minimizer-webpack-plugin -D進行下載（這是webpack5中的外掛）。
3、修改webpack.config.js配置
const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// 設定node.js環境變數，使其預設是處於開發環境development，不是生產環境
//壓縮css的外掛css-minimizer-webpack-plugin
process.env.NODE_ENV = 'development'
module.exports = {
entry: './js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules:
[
{
test: /\.css$/,
use:
[
// 建立style標籤，將樣式放入
// 'style-loader',所以想提取css成單獨檔案時，這裡不能把css樣式放入
// 使用下邊的外掛進行取代，提取js中的css成單獨檔案
MiniCssExtractPlugin.loader,
// 將css檔案整合到js檔案中
'css-loader',
//css相容性處理: postcss --> 外掛postcss-loader 、postcss-preset-env
//這些外掛幫postcss找到package.json中browserslist裡面的配置，通過配置載入指定的css相容性樣式
//使用loader的預設配置
//"postcss-loader',
//修改loader的配置
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')()]
}
}
}
]
}
]
},
plugins: [
new HtmlwebpackPlugin(
{
template: './index.html'
}
),
new MiniCssExtractPlugin(
{
// 對輸出的檔案重新命名
filename: 'built.css'
}
),
new CssMinimizerWebpackPlugin(
{
// 壓縮css的外掛
}
)
]
}
4、終端輸入npm run dev，隨後就可以檢視build資料夾下的built.css檔案的大小。
注：教程轉載自瘋子的夢想@部落格
越是迷茫、浮躁的時候，保持冷靜和耐心，尤為重要