以下皆為拉勾教育課件內(nèi)筆記
轉(zhuǎn)換 CSS
例如，我們現(xiàn)在如果需要對 CSS 文件進行打包盖腕。我們就需要 CSS 對應(yīng)的 loader （打包器）浓镜。一般來說有兩個 loader：
- css-loader 負責(zé)遍歷 css 文件，將 CSS 轉(zhuǎn)化為 CommonJS（將 CSS 輸出到打包后的 JS 文件中）
- style-loader 負責(zé)把包含 CSS 內(nèi)容的 JS 代碼哭廉，掛載到頁面的 style 標(biāo)簽中相叁。
需要安裝才能使用上述 loader ：npm i css-loader style-loader -D
示例：
- 聲明 CSS
html, body { margin: 0; padding: 0; } body { /* background-color: #dbf; */ background: url('../images/1.jpg') no-repeat; } - 在入口文件中，以模塊的方式引入 CSS
require('./header') import data from './data.json' import './css/main.css' // 引? CSS console.log('Hello Webpack', data) - 然后在 Webpack 的配置文件當(dāng)中椿访，添加 .css 文件的規(guī)則配置
注意：在處理 CSS 文件時，各個 loader 的使用腐缤，有先后順序肛响。例如，我們先用 css-loader 將 CSS 代碼轉(zhuǎn)成 JS 代碼绍在，再由 style-loader 將 JS 代碼中的樣式掛載到頁面中雹有。因此，需要先使用 css-loader溜宽，然后在使用 style-loader质帅。const { resolve } = require('path') module.exports = { // 模式 mode: 'production', // ?? entry: './src/index.js', // 出? output: { filename: 'bundle.js' path: resolve(__dirname, 'output'), }, // loader 配置 module: { // 配置?件類型規(guī)則成玫，不同的規(guī)則使?不同的 loader 進?處理 rules: [ { // test 后跟隨正則表達式，匹配?件類型 test: /\.css$/, // use 表示使?什么 loader 來處理上述類型的?件 use: [ // 2. 將 JS 中的樣式?件猪腕，嵌?到??的 style 標(biāo)簽中 'style-loader', // 1. css-loader 將樣式?件轉(zhuǎn)成 CommonJS 模塊钦勘，加載到 JS 中 'css-loader' ] } ] },
這里需要強調(diào)的是：use 數(shù)組中煤惩，loader 的加載順序是從下往上（從右往左）的，即最后一個 loader 最先執(zhí)行魄揉。因此洛退，css-loader 在后杰标，style-loader 在前彩匕。
轉(zhuǎn)換 LESS
如果項目中除了 .css 文件之外，還有 .less 文件掸犬，我們還需要對 .less 文件進行打包绪爸。這里的打包順序是：先將 .less 文件轉(zhuǎn)成 .css 文件，然后再打包 .css 文件胜茧。
打包 .less 文件我們需要安裝 less 和 less-loader：npm i less less-loader -D
示例：
- 聲明 less 文件
@body-bg: #dfb; @body-color: blue; body { margin: 0 auto; padding: 20px; background: @body-bg; color:@body-color; } p { padding: 20px; background: rgb(248, 200, 173); } .code { user-select: none; } - 引入 less 文件
require('./header') import data from './data.json' import './css/main.css' // 引? CSS import './css/main.less' // 引? less console.log('Hello Webpack', data) - 然后再 webpack.config,js 中添加對應(yīng)的 less 配置
首先，我們在 rules 數(shù)組中丹墨，添加 .less 文件的規(guī)則匹配嬉愧。然后，我們需要的執(zhí)行順序是 less-loader > css-loader > style-loader王财，所以 less-loader 放在 use 數(shù)組的最后裕便。const path = require('path') module.exports = { mode: 'none', entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } }
將 CSS 打包成獨立文件
此時我們需要 mini-css-extract-plugin 插件，安裝：npm install mini-css-extract-plugin -D挂疆。使用：
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 'style-loader', // 將 CSS 嵌?到 HTML 中（現(xiàn)在缤言，不再需要 將 CSS 嵌?到 HTML 中）
MiniCssExtractPlugin.loader, // 將 CSS 打包到獨??件中
'css-loader'
]
},
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 指定輸?位置和?件名稱
filename: 'css/[name].css',
}),
],
}
解決 CSS 中的圖片引入問題
將 CSS 單獨打包到獨立文件時视事，往往會發(fā)生路徑的變更，此時鸳碧，CSS 中的背景圖片地址可能需要更改，可以通過為 MiniCssExtractPlugin.loader 指定公共路徑的方式解決路徑變更的問題腾仅。
{
test: /\.css$/,
use: [
// 'style-loader', // 將 CSS 嵌?到 HTML 中（現(xiàn)在套利，不再需要 將 CSS 嵌?到 HTML 中）
// MiniCssExtractPlugin.loader // 將 CSS 打包到獨??件中
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../' // 為背景圖?指定路徑
}
},
'css-loader'
]
},
添加前綴
此時需要兩個包
- postcss-loader
- autoprefixer
安裝：npm install postcss-loader autoprefixer -D
使用：
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader
'css-loader'
'postcss-loader' // 添加這??肉迫，注意添加的順序
]
},
]
}
此時運行 webpack 會報錯：'No PostCSS Config found'，原因是 PostCSS 需要一個配置喊衫，用來設(shè)置 autoprefixer 的設(shè)置標(biāo)準（即需要兼容哪些瀏覽器）
解決：添加 PostCSS 的配置 - 在項目根目錄下添加 postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
指定兼容規(guī)則有兩種指定方式族购，二選一即可【詳情查看】：
- 可以在 package.json 中指定（推薦）
"browserslist": [
"last 1 version", // 最后的?個版本
"> 1%" // 代表全球超過 1% 使?的瀏覽器
]
- 在項目根目錄下創(chuàng)建 .browserslistrc
# Browsers that we support
last 1 version
> 1%
更多查詢條件
> 5%: 基于全球使?率統(tǒng)計?選擇的瀏覽器版本范圍。>=,<,<=同樣適?违施。> 5% in US : 同上瑟幕，只是使 ?地區(qū)變?yōu)槊绹?持兩個字?的國家碼來指定地區(qū)。
> 5% in alt-AS : 同上辣往，只是使?地區(qū)變?yōu)閬喼匏袊抑潮啊＿@?列舉了所有的地區(qū)碼。
> 5% in my stats : 使?定制的瀏覽器統(tǒng)計數(shù)據(jù)钻哩。
cover 99.5% : 使?率總和為99.5%的瀏覽器版本肛冶，前提是瀏覽器提供了使?覆蓋率。
cover 99.5% in US : 同上珊肃，只是限制了地域，?持兩個字?的國家碼厉亏。
cover 99.5% in my stats :使?定制的瀏覽器統(tǒng)計數(shù)據(jù)烈和。
maintained node versions :所有還被 node 基?會維護的 node 版本招刹。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :當(dāng)前被 browserslist 使?的 node 版本疯暑。
extends browserslist-config-mycompany :來?browserslist-config-mycompany包的查詢設(shè)置
ie 6-8 : 選擇?個瀏覽器的版本范圍妇拯。
Firefox > 20 : 版本?于20的所有?狐瀏覽器版本。>=,<,<=同樣適?仗嗦。
ios 7 :ios 7?帶的瀏覽器瞪浸。
Firefox ESR :最新的?狐 ESR（?期?持版） 版本的瀏覽器吏祸。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的兩個發(fā)?版蹈矮，包括所有的次版本號和補 丁版本號變更的瀏覽器版本鸣驱。
since 2015 or last 2 years :?某個時間以來更新的版本（也可以寫的更具體since 2015-03或者 since 2015-03-10）
dead :通過last 2 versions篩選的瀏覽器版本中，全球使?率低于0.5%并且官?聲明不在維護或者事 實上已經(jīng)兩年沒有再更新的版本北滥。?前符合條件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1闸翅。
last 2 versions :每個瀏覽器最近的兩個版本坚冀。
last 2 Chrome versions :chrome 瀏覽器最近的兩個版本。
defaults :默認配置 > 0.5%, last 2 versions, Firefox ESR, not dead司训。
not ie <= 8 : 瀏覽器范圍的取反。 可以添加 not 在任和查詢條件前?壳猜，表示取反
格式校驗
每個程序員都有自己的編碼習(xí)慣统扳，最常見莫過于：
- 有的人代碼結(jié)尾必須加分號，有的人覺得不加分號更好看闪幽；
- 有的人寫字符串時盯腌，喜歡用雙引號，而有的人喜歡用單引號级乍；
- 有的人代碼縮進喜歡用 4 個空格帚湘，有的人喜歡用 2 個空格；
諸如此類捅厂，但是項目開發(fā)一般是多人協(xié)作资柔，所以，不同的工程師辙芍，寫的代碼風(fēng)格不同羹与。一般寫自己的代碼怎么折騰都沒關(guān)系，但整個項目有一個統(tǒng)一的編碼規(guī)范吃衅。這樣別看源碼就能看得懂诡渴。在前端開發(fā)中，我們使用 StyleLint 插件來檢測 CSS 代碼惑灵。
官網(wǎng)：https://stylelint.io/
代碼風(fēng)格標(biāo)準：https://github.com/stylelint/stylelint-config-standard
安裝插件：npm i --g stylelint stylelint-config-standard 英支，stylelint 是運行工具，stylelint-config-standard 是 stylelint 的推薦配置干花。
在項目的根目錄下創(chuàng)建 .stylelintrc.json 文件池凄，添加以下配置：
{
"extends": "stylelint-config-standard",
"rules": {
# 除了使? stylelint-config-standard，我們還可以在 rules 字段中?定 義校驗規(guī)則
"block-no-empty": true # 代碼塊不能為空
}
}
運行 stylelint致盟，檢測 CSS 代碼格式
# 注意：路徑是寫在雙引號中的
# 檢測?個?件
stylelint ?件路徑/?件名.css
# 檢測整個項?下尤慰，所有的 CSS ?件
stylelint **/*.css
Webpack 中使用 StyleLint
安裝：npm i stylelint stylelint-config-standard stylelint-webpack-plugin -D
- stylelint 校驗樣式文件的命令
- stylelint-config-standard 校驗樣式文件的規(guī)則
- stylelint-webpack-plugin 在 Webpack 中使用 stylelint 的插件
在 webpack.config.js 中配置 stylelint-webpack-plugin
配置詳情：https://www.npmjs.com/package/stylelint-webpack-plugin
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [
// new StylelintPlugin(), // 使?默認值
new StylelintPlugin({
files: ['src/css/*.{css,less,sass,scss}'], // 匹配需要進?格式 校驗的?件
fix: true // 是否盡可能多地解決錯誤
})
],
// ...
};
在 package.json 中配置 stylelint-config-standard伟端，使用 stylelint-config-standard 規(guī)則來檢測代碼。
"stylelint": {
"extends": "stylelint-config-standard",
// 后續(xù)為擴展配置（如果不需要?定義規(guī)則党巾，可以忽略 rules）
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": ["extends", "ignores"]
}
],
"indentation": "tab",
"number-leading-zero": "never",
"unit-whitelist": ["em", "rem", "s"]
}
}
指定規(guī)則配置有三種方式玛歌，按照加載的先后順序擎椰，依次是：
- 在 package.json 中的 stylelint 屬性指定規(guī)則
- 在 .stylelintrc 中指定規(guī)則
- 在 stylelint.config.js 中指定規(guī)則
壓縮 CSS
壓縮 CSS 我們可以使用 optimize-css-assets-webpack-plugin 進行达舒。
詳情查看：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
安裝：npm install optimize-css-assets-webpack-plugin -D
使用：
const path = require('path')
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpac k-plugin');
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new OptimizeCssAssetsPlugin()
]
}
