基本環(huán)境配置
-
node版本8.0+邦泄，測(cè)試使用的node版本為12.18.3删窒。
webpack的安裝
-
項(xiàng)目安裝，通過(guò)命令
npx webpack執(zhí)行打包顺囊。
npm install webpack@4.19.1 webpack-cli@3.1.2 -D
-
全局安裝肌索，直接使用命令
webpack執(zhí)行打包。
npm install webpack@4.19.1 webpack-cli@3.1.2 -D
webpack的基本打包配置
需要在項(xiàng)目目錄創(chuàng)建一個(gè) webpack.config.js 的文件包蓝，寫(xiě)入以下內(nèi)容：
entry：webpack 入口配置驶社。
output：webpack 打包輸出配置企量。
module：loader 相關(guān)配置，指示不同文件使用不同的
loader處理亡电。plugins：插件相關(guān)配置届巩。
mode：設(shè)置webpack的打包環(huán)境，可選值有production（生產(chǎn)環(huán)境）份乒、development（開(kāi)發(fā)環(huán)境）恕汇、none。
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'index.js'), // webpack 打包入口配置
output: {// webpack 打包輸出配置
// 輸出的文件名
filename: 'index.js',
// 輸出的路徑
path: path.resolve(__dirname, 'dist')
},
module: { // loader 相關(guān)配置
rules:[]
},
plugins: [], // 插件相關(guān)配置
mode: 'development' // 設(shè)置webpack的打包環(huán)境或辖，可選值有production（生產(chǎn)環(huán)境）瘾英、development（開(kāi)發(fā)環(huán)境）、none
}
使用loader處理css颂暇、less等樣式文件
配置
loader的作用：用來(lái)規(guī)定哪些文件用哪些loader處理缺谴，以及loader的處理順序。loader的處理順序?yàn)閺暮蟮角埃◤挠业阶螅?/p>如果使用多個(gè)
loader耳鸯，就使用use字段配置湿蛔，只使用一個(gè)loader時(shí)，可以直接使用loader字段县爬。安裝
loader時(shí)要注意安裝的loader版本是否和webpack版本兼容阳啥，不兼容會(huì)報(bào)錯(cuò)，打包失敗财喳。
// loader 相關(guān)配置
module: {
// loader 的相關(guān)規(guī)則察迟，用來(lái)規(guī)定哪些文件用哪些 loader 處理，以及 loader 的處理順序
rules:[
{
// 匹配到以 .css 為后綴的文件耳高，就使用 style-loader扎瓶、css-loader 這兩個(gè) loader 處理
/**
* loader 的處理順序?yàn)閺暮蟮角埃◤挠业阶螅?
* 第一步：匹配到 css 文件，先用 css-loader 處理整合到 js 文件中
* 第二步：然后使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽祝高，將 js 中的樣式引入
*/
test: /\.css$/,
// 如果使用多個(gè) loader栗弟，就使用 use 字段配置，只使用一個(gè) loader 時(shí)工闺，可以直接使用 loader 字段
// use 數(shù)組里面使用字符串是簡(jiǎn)寫(xiě)模式乍赫，也可以使用對(duì)象作為數(shù)組的值（可修改 loader 默認(rèn)配置）
// 安裝的 loader 包版本為 style-loader@0.23.1、css-loader@2.1.1
use: ['style-loader', 'css-loader']
},
{
/**
* 第一步：使用 less-loader 處理陆蟆，將 less 代碼轉(zhuǎn)為 css 代碼
* 第二步：將 css 代碼用 css-loader 處理整合到 js 文件中
* 第三步：使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽雷厂，將 js 中的樣式引入
*/
test: /\.less$/,
// 需要安裝的包（加上上面兩個(gè)）以及版本為：less@3.9.0、less-loader@5.0.0
use: ['style-loader', 'css-loader', 'less-loader']
},
{
/**
* 第一步：使用 sass-loader 處理叠殷，將 scss 代碼轉(zhuǎn)為 css 代碼
* 第二步：將 css 代碼用 css-loader 處理整合到 js 文件中
* 第三步：使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽改鲫，將 js 中的樣式引入
*/
test: /\.scss$/,
// 需要安裝的包（加上上面兩個(gè)）以及版本為：node-sass@4.14.1、sass-loader@7.1.0
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
使用插件處理html，并自動(dòng)引入打包的其他資源
可以使用插件
html-webpack-plugin處理html像棘，該插件可以自動(dòng)將打包的其他資源引入稽亏。插件可以配置壓縮文檔
...
// 用來(lái)處理 html 文件，創(chuàng)建 html 模板（html-webpack-plugin@4.5.2）
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
// 插件相關(guān)配置
plugins: [
// 使用 html-webpack-plugin 處理 html 模板
// 如果不傳遞參數(shù)缕题，默認(rèn)會(huì)創(chuàng)建一個(gè)空的 html 模板截歉，并自動(dòng)引入打包好的其他文件資源
new HtmlWebpackPlugin({
// 以當(dāng)前路徑下的 index.html 文件為模板創(chuàng)建一個(gè)html文件，并自動(dòng)引入打包文件
template: path.resolve(__dirname, 'index.html'),
// 聲明創(chuàng)建的 html 模板文件名
filename: 'index.html',
// 壓縮 html 模板的配置
minify: {
// 是否刪除多余的 html 屬性引號(hào)
removeAttributeQuotes: true,
// 是否刪除空格烟零、換行
collapseWhitespace: true,
// 是否刪除注釋
removeComments: true
}
})
],
...
}
使用loader處理圖片資源以及其他文件
-
變量名說(shuō)明
[name]：源文件的名字
[hash]：打包時(shí) webpack 為文件生成的 hash 值
[hash:10]：表示取 hash 值的前 10 位
[chunckhash]：文件 chunck 的 hash 值瘪松，在同一個(gè)文件引入的其他文件，生成的 chunckhash 值一樣
[contenthash]：根據(jù)文件內(nèi)容生成的 hash 值
[ext]：源文件的后綴
使用loader處理圖片資源
rules:[
{
// 匹配以 .png锨阿、.jpg宵睦、.jpeg、.gif墅诡、.svg 為后綴的文件
test: /\.(png|jpe?g|gif|svg)$/i,
// 表示使用 url-loader 處理文件（url-loader依賴file-loader）壳嚎，可以對(duì)圖片進(jìn)行壓縮等其他處理
// 需要安裝的包以及版本：url-loader@1.1.2、file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法书斜，所以會(huì)導(dǎo)致文件的路徑變成 [object module]诬辈。
loader: 'url-loader',
// loader 的相關(guān)配置
options: {
// 當(dāng)文件小于 10KB 時(shí)，就會(huì)被 base64 處理荐吉，可以減少請(qǐng)求服務(wù)端的次數(shù)
limit: 10 * 1024,
// 打包輸出的文件名
/**
* [name]：原文件的名字
* [hash]：打包時(shí) webpack 為文件生成的 hash 值
* [hash:10]：表示取 hash 值的前 10 位
* [chunckhash]：文件 chunck 的 hash 值，在同一個(gè)文件引入的其他文件口渔，生成的 chunckhash 值一樣
* [contenthash]：根據(jù)文件內(nèi)容生成的 hash 值
* [ext]：源文件的后綴
*/
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'image',
// 不使用 es6 模塊化解析样屠，解決圖片路徑變成[object module]的問(wèn)題，因?yàn)?html-loader 引入的圖片是 commonjs
esModule: false
}
},
{
// 處理 html 中的圖片資源
test: /\.html$/i,
// 上一個(gè)配置不會(huì)處理 html 中的圖片文件缺脉，使用 html-loader 引入圖片資源痪欲，交給 url-loader 處理
// 需要安裝的包以及版本：html-loader@1.1.0
loader: 'html-loader'
}
]
使用 loader 處理其他資源
rules:[
{
// 處理字體文件
test: /\.(woff2?|eot|ttf|otf)$/i,
use: {
// 需要安裝的包以及版本：url-loader@1.1.2、file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法攻礼，所以會(huì)導(dǎo)致文件的路徑變成 [object module]业踢。
loader: 'url-loader',
options: {
// 當(dāng)文件小于 10KB 時(shí)，就會(huì)被 base64 處理礁扮，可以減少請(qǐng)求服務(wù)端的次數(shù)
limit: 10 * 1024,
// 打包輸出的文件名
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'font',
// 不使用 es6 模塊化解析知举，解決文件路徑變成[object module]的問(wèn)題
esModule: false
},
}
},
{
// 處理其他文件(排除下列文件都使用 file-loader 處理)
exclude: /\.(css|js|html|less|scss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i,
// 需要安裝的包以及版本：file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法，所以會(huì)導(dǎo)致文件的路徑變成 [object module]太伊。
loader: 'file-loader',
options: {
// 打包輸出的文件名
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'order',
}
}
]
清空輸出目錄的舊文件
// 用來(lái)清空打包目錄下的所有文件和目錄
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
...
// 插件相關(guān)配置
plugins: [
...
// 用來(lái)清空打包目錄下的所有文件和目錄
new CleanWebpackPlugin()
],
...
}
使用webpack-dev-server實(shí)現(xiàn)自動(dòng)運(yùn)行打包編譯和頁(yè)面熱更新
...
module.exports = {
...
// 開(kāi)發(fā)服務(wù)器 devServer：用來(lái)自動(dòng)構(gòu)建（自動(dòng)打包雇锡、自動(dòng)啟動(dòng)瀏覽器、熱更新僚焦、解決跨域等問(wèn)題）
// 需要安裝的包以及版本：webpack-dev-server@3.11.2
// 運(yùn)行指令：npx webpack-dev-server
devServer: {
// 是否自動(dòng)啟動(dòng)瀏覽器
open: true,
// 是否啟用 gzip 壓縮
compress: true,
// 服務(wù)器運(yùn)行的端口號(hào)
port: 3000
}
}
處理css樣式（配置css兼容锰提、輸出為文件、壓縮）
引入的css在打包過(guò)程中使用了
style-loader，會(huì)將css樣式放到style標(biāo)簽中立肘，如果想將樣式提取為css文件需要額外安裝插件（mini-css-extract-plugin@0.9.0）處理边坤。打包生成的css代碼會(huì)存在很多的空格換行還有注釋等，為了減少打包后文件的體積需要安裝額外的插件（
optimize-css-assets-webpack-plugin@5.0.4）進(jìn)行壓縮谅年。不同瀏覽器下
css的屬性書(shū)寫(xiě)可能有差異茧痒，可以使用loader（postcss-loader@4.3.0）處理css的瀏覽器兼容性問(wèn)題。安裝postcss-loader@4.3.0時(shí)還需要安裝依賴插件postcss-preset-env@6.7.0讀取package.json踢故，獲取里面的browserslist屬性值作為需要兼容的瀏覽器版本配置文黎。
"browserslist": [
">0.2%", // 表示至少兼容 99.8% 的瀏覽器
"not op_mini all", // 不需要兼容所有歐朋mini瀏覽器
"last 2 versions", // 需要兼容所有瀏覽器的最新兩個(gè)版本
"not ie <= 8" // 不需要兼容 ie8 一下版本的瀏覽器
]
webpack.config.js
// 用來(lái)處理 css 樣式，提取為單獨(dú)文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 用來(lái)壓縮打包后的 css殿较，去掉多余的空格耸峭、注釋等
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
...
module: {
// loader 的相關(guān)規(guī)則，用來(lái)規(guī)定哪些文件用哪些 loader 處理淋纲，以及 loader 的處理順序
rules:[
{
...
test: /\.less$/i,
use: [{
// MiniCssExtractPlugin.loader 用來(lái)將 css 樣式提取為單獨(dú)文件
loader: MiniCssExtractPlugin.loader,
options: {
// 由于css樣式中引用了其他資源劳闹，需要配置其他資源的相對(duì)路徑
publicPath: '../'
}
}, 'css-loader', {
// 使用 postcss-loader 處理樣式兼容性問(wèn)題
/**
* 安裝的包以及版本為：postcss-loader@4.3.0、postcss-preset-env@6.7.0
* 其中依賴插件 postcss-preset-env 是用來(lái)獲取 package.json 里 browserslist 的配置的洽瞬，browserslist 的配置如下
"browserslist": [
">0.2%", // 表示至少兼容 99.8% 的瀏覽器
"not op_mini all", // 不需要兼容所有歐朋mini瀏覽器
"last 2 versions", // 需要兼容所有瀏覽器的最新兩個(gè)版本
"not ie <= 8" // 不需要兼容 ie8 一下版本的瀏覽器
],
*/
// 注意該 loader 要在 less-loader 之后使用本涕， css-loader 之前使用
loader: 'postcss-loader',
options: {
// 修改 postcss-loader 的配置
postcssOptions: {
// 使用插件 postcss-preset-env 讀取 package.json，獲取里面的 browserslist 屬性值作為需要兼容的瀏覽器版本配置
plugins: [['postcss-preset-env']]
}
}
}, 'less-loader']
},
]
},
// 插件相關(guān)配置
plugins: [
...
// 用來(lái)處理 css 樣式伙窃，提取為單獨(dú)文件（還需要在 loader 中配置）
// 安裝的包以及版本為：mini-css-extract-plugin@0.9.0
new MiniCssExtractPlugin({
// 對(duì)生成的css文件進(jìn)行重命名
filename: 'css/[contenthash:10].css'
}),
// 用來(lái)壓縮打包后的 css菩颖，去掉多余的空格、注釋等
new OptimizeCssAssetsWebpackPlugin()
],
...
}
配置eslint代碼檢查
// eslint 代碼檢測(cè)
const EslintWebpackPlugin = require('eslint-webpack-plugin')
module.exports = {
...
// 插件相關(guān)配置
plugins: [
// eslint 代碼檢查
// 需要安裝的包以及配置：eslint@8.4.1为障、eslint-config-airbnb-base@15.0.0晦闰、eslint-plugin-import@2.25.3、eslint-webpack-plugin@3.1.1
/**
* 包作用說(shuō)明
* eslint-config-airbnb-base：安裝 airbnb-base 這種 js 代碼規(guī)范配置鳍怨，可以替換為其他的代碼規(guī)范
* eslint-plugin-import：用于讀取代碼規(guī)范配置呻右，會(huì)獲取 package.json 文件里面的 eslintConfig 配置信息。
"eslintConfig": {
"extends": "airbnb-base",
// eslint 默認(rèn)不認(rèn)識(shí) window鞋喇、navigator 等瀏覽器的全局變量
// 需要設(shè)置 browser 為 true
"env": {
"browser": true // 配置支持瀏覽器全局變量
}
}
*/
new EslintWebpackPlugin({
// 是否啟用代碼自動(dòng)修復(fù)功能声滥，啟用會(huì)修改源代碼，一般不啟用
fix: true
})
],
}
使用babel處理js兼容性問(wèn)題
由于在寫(xiě)代碼的時(shí)候經(jīng)常會(huì)用到一些低版本瀏覽器不兼容的語(yǔ)法侦香，例如 ES6語(yǔ)法落塑，因此需要使用 babel 處理 js 的兼容性問(wèn)題
...
rules: [
...
{
// 使用 babel-loader 處理瀏覽器兼容性問(wèn)題
test: /\.js$/i,
// 排除對(duì) node_modules 目錄下的文件的處理
exclude: /node_modules/,
// 對(duì) src 目錄下的文件進(jìn)行處理
// include: /src/,
/**
* 如果有多個(gè) loader 要處理 js 文件，可以通過(guò) enforce 字段規(guī)定處理順序鄙皇，可選值如下：
* pre：優(yōu)先執(zhí)行
* normal：正常執(zhí)行
* inline：其次執(zhí)行
* post：最后執(zhí)行
*/
enforce: 'pre',
// 安裝的包以及版本：@babel/core@7.16.0芜赌、@babel/preset-env@7.16.4、babel-loader@8.2.3伴逸、core-js@3.19.3
/**
* 包說(shuō)明：
* @babel/core：依賴包
* @babel/preset-env：處理基本的 js 語(yǔ)法兼容性問(wèn)題（箭頭函數(shù)）缠沈、不可以處理高級(jí)的語(yǔ)法（promise等）
* @core-js：處理高級(jí)的 js 語(yǔ)法兼容性問(wèn)題（如promise、replaceAll等）
*/
loader: 'babel-loader',
options: {
// 預(yù)設(shè)：指示 babel 做怎樣的兼容只處理和使用哪些插件進(jìn)行處理
presets: [
[
// 處理基本的 js 語(yǔ)法兼容性問(wèn)題（箭頭函數(shù)）、不可以處理高級(jí)的語(yǔ)法（promise等）
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
corejs: {
// 指定 core-js 的版本洲愤，要與安裝的包的大版本一致
version: 3
},
// 需要達(dá)到的目標(biāo)颓芭，必須要兼容的瀏覽器
targets: {
chrome: '60', // 至少要兼容 chrome 60 以上
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
],
...
sourceMap配置錯(cuò)誤定位
source-map 是一種提供源代碼到構(gòu)建后代碼的映射技術(shù)，如果構(gòu)建后代碼出現(xiàn)報(bào)錯(cuò)柬赐，可以通過(guò)映射關(guān)系找到報(bào)錯(cuò)位置亡问。
-
source-map(外部，會(huì)生成一個(gè)map文件)
- 功能： 可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置肛宋。
-
inline-source-map(內(nèi)聯(lián)州藕，不會(huì)額外生成一個(gè)map文件，內(nèi)聯(lián)在指定輸出文件中)
- 功能：只生成一個(gè)內(nèi)聯(lián)source-map酝陈、可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
-
hidden-source-map(外部)
功能：可視化錯(cuò)誤代碼錯(cuò)誤原因床玻，但是沒(méi)有錯(cuò)誤位置
不足：不能追蹤源代碼錯(cuò)誤，只能提示到構(gòu)建后代碼的錯(cuò)誤位置
-
eval-source-map(內(nèi)聯(lián))
- 功能：每一個(gè)文件都生成對(duì)應(yīng)的 source-map ,都在 eval 中沉帮，可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
-
nosources-source-map(外部)
- 功能：可視化錯(cuò)誤代碼準(zhǔn)確信息锈死，但是沒(méi)有任何源代碼信息
-
cheap-source-map(外部)
功能：可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
不足：只能精確到行，不能精確到列穆壕。
-
cheap-module-source-map(外部)
- 功能：可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置待牵。
eval-cheap-module-source-map 是
vue腳手架構(gòu)建項(xiàng)目時(shí)推薦的配置，在開(kāi)發(fā)模式下是最快的選擇喇勋。<br />
在生產(chǎn)模式下一般選擇隱藏錯(cuò)誤信息和報(bào)錯(cuò)位置（nosources-source-map）
module.exports = {
...
// 這是 vue 腳手架構(gòu)建項(xiàng)目時(shí)推薦的配置缨该，在開(kāi)發(fā)模式下是最快的選擇
// 在生產(chǎn)模式下一般選擇隱藏錯(cuò)誤信息和報(bào)錯(cuò)位置（nosources-source-map）
devtool: 'eval-cheap-module-source-map',
...
}
附錄
配置源碼
/**
* webpack 基本配置
*/
const path = require('path')
// 用來(lái)處理 html 文件，創(chuàng)建 html 模板（html-webpack-plugin@4.5.2）
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 用來(lái)清空打包目錄下的所有文件和目錄
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 用來(lái)處理 css 樣式川背，提取為單獨(dú)文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 用來(lái)壓縮打包后的 css压彭，去掉多余的空格、注釋等
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// eslint 代碼檢測(cè)
const EslintWebpackPlugin = require('eslint-webpack-plugin')
module.exports = {
// webpack 打包入口配置
entry: path.resolve(__dirname, './src/main.js'),
// webpack 打包輸出配置
output: {
// 輸出的文件名
filename: 'js/index.js',
// 輸出的路徑
path: path.resolve(__dirname, 'dist')
},
// source-map 是一種提供源代碼到構(gòu)建后代碼的映射技術(shù)渗常，如果構(gòu)建后代碼出現(xiàn)報(bào)錯(cuò)，可以通過(guò)映射關(guān)系找到報(bào)錯(cuò)位置汗盘。
/**
* source-map(外部皱碘，會(huì)生成一個(gè)map文件)
* 功能： 可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置。
* inline-source-map(內(nèi)聯(lián)隐孽，不會(huì)額外生成一個(gè)map文件癌椿，內(nèi)聯(lián)在指定輸出文件中)
* 功能：只生成一個(gè)內(nèi)聯(lián)source-map、可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
* hidden-source-map(外部)
* 功能：可視化錯(cuò)誤代碼錯(cuò)誤原因菱阵，但是沒(méi)有錯(cuò)誤位置
* 不足：不能追蹤源代碼錯(cuò)誤踢俄，只能提示到構(gòu)建后代碼的錯(cuò)誤位置
* eval-source-map(內(nèi)聯(lián))
* 功能：每一個(gè)文件都生成對(duì)應(yīng)的 source-map ,都在 eval 中，可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
* nosources-source-map(外部)
* 功能：可視化錯(cuò)誤代碼準(zhǔn)確信息晴及，但是沒(méi)有任何源代碼信息
* cheap-source-map(外部)
* 功能：可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
* 不足：只能精確到行都办，不能精確到列。
* cheap-module-source-map(外部)
* 功能：可視化錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
*/
// 這是 vue 腳手架構(gòu)建項(xiàng)目時(shí)推薦的配置，在開(kāi)發(fā)模式下是最快的選擇
// 在生產(chǎn)模式下一般選擇隱藏錯(cuò)誤信息和報(bào)錯(cuò)位置（nosources-source-map）
devtool: 'eval-cheap-module-source-map',
// loader 相關(guān)配置
module: {
// loader 的相關(guān)規(guī)則琳钉，用來(lái)規(guī)定哪些文件用哪些 loader 處理势木，以及 loader 的處理順序
rules:[
{
// 匹配到以 .css 為后綴的文件，就使用 style-loader歌懒、css-loader 這兩個(gè) loader 處理
/**
* loader 的處理順序?yàn)閺暮蟮角埃◤挠业阶螅?
* 第一步：匹配到 css 文件啦桌，先用 css-loader 處理整合到 js 文件中
* 第二步：然后使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽，將 js 中的樣式引入
*/
test: /\.css$/i,
// 如果使用多個(gè) loader及皂，就使用 use 字段配置甫男，只使用一個(gè) loader 時(shí)，可以直接使用 loader 字段
// use 數(shù)組里面使用字符串是簡(jiǎn)寫(xiě)模式验烧，也可以使用對(duì)象作為數(shù)組的值（可修改 loader 默認(rèn)配置）
// 安裝的 loader 包版本為 style-loader@0.23.1板驳、css-loader@2.1.1
// use: ['style-loader', 'css-loader']
use: [{
// MiniCssExtractPlugin.loader 用來(lái)將 css 樣式提取為單獨(dú)文件
loader: MiniCssExtractPlugin.loader,
options: {
// 由于css樣式中引用了其他資源，需要配置其他資源的相對(duì)路徑
publicPath: '../'
}
}, 'css-loader', {
// 使用 postcss-loader 處理樣式兼容性問(wèn)題
/**
* 安裝的包以及版本為：postcss-loader@4.3.0噪窘、postcss-preset-env@6.7.0
* 其中依賴插件 postcss-preset-env 是用來(lái)獲取 package.json 里 browserslist 的配置的笋庄，browserslist 的配置如下
"browserslist": [
">0.2%", // 表示至少兼容 99.8% 的瀏覽器
"not op_mini all", // 不需要兼容所有歐朋mini瀏覽器
"last 2 versions", // 需要兼容所有瀏覽器的最新兩個(gè)版本
"not ie <= 8" // 不需要兼容 ie8 一下版本的瀏覽器
],
*/
// 注意該 loader 要在 css-loader 之前使用
loader: 'postcss-loader',
options: {
// 修改 postcss-loader 的配置
postcssOptions: {
// 使用插件 postcss-preset-env 讀取 package.json，獲取里面的 browserslist 屬性值作為需要兼容的瀏覽器版本配置
plugins: [['postcss-preset-env']]
}
}
}]
},
{
/**
* 第一步：使用 less-loader 處理倔监，將 less 代碼轉(zhuǎn)為 css 代碼
* 第二步：將 css 代碼用 css-loader 處理整合到 js 文件中
* 第三步：使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽直砂，將 js 中的樣式引入
*/
test: /\.less$/i,
// 需要安裝的包（加上上面兩個(gè)）以及版本為：less@3.9.0、less-loader@5.0.0
// use: ['style-loader', 'css-loader', 'less-loader']
use: [{
// MiniCssExtractPlugin.loader 用來(lái)將 css 樣式提取為單獨(dú)文件
loader: MiniCssExtractPlugin.loader,
options: {
// 由于css樣式中引用了其他資源浩习，需要配置其他資源的相對(duì)路徑
publicPath: '../'
}
}, 'css-loader', {
// 使用 postcss-loader 處理樣式兼容性問(wèn)題
/**
* 安裝的包以及版本為：postcss-loader@4.3.0静暂、postcss-preset-env@6.7.0
* 其中依賴插件 postcss-preset-env 是用來(lái)獲取 package.json 里 browserslist 的配置的，browserslist 的配置如下
"browserslist": [
">0.2%", // 表示至少兼容 99.8% 的瀏覽器
"not op_mini all", // 不需要兼容所有歐朋mini瀏覽器
"last 2 versions", // 需要兼容所有瀏覽器的最新兩個(gè)版本
"not ie <= 8" // 不需要兼容 ie8 一下版本的瀏覽器
],
*/
// 注意該 loader 要在 less-loader 之后使用谱秽， css-loader 之前使用
loader: 'postcss-loader',
options: {
// 修改 postcss-loader 的配置
postcssOptions: {
// 使用插件 postcss-preset-env 讀取 package.json洽蛀，獲取里面的 browserslist 屬性值作為需要兼容的瀏覽器版本配置
plugins: [['postcss-preset-env']]
}
}
}, 'less-loader']
},
{
/**
* 第一步：使用 sass-loader 處理，將 scss 代碼轉(zhuǎn)為 css 代碼
* 第二步：將 css 代碼用 css-loader 處理整合到 js 文件中
* 第三步：使用 style-loader 創(chuàng)建一個(gè) style 標(biāo)簽疟赊，將 js 中的樣式引入
*/
test: /\.scss$/i,
// 需要安裝的包（加上上面兩個(gè)）以及版本為：node-sass@4.14.1郊供、sass-loader@7.1.0
// use: ['style-loader', 'css-loader', 'sass-loader']
use: [{
// MiniCssExtractPlugin.loader 用來(lái)將 css 樣式提取為單獨(dú)文件
loader: MiniCssExtractPlugin.loader,
options: {
// 由于css樣式中引用了其他資源，需要配置其他資源的相對(duì)路徑
publicPath: '../'
}
}, 'css-loader', {
// 使用 postcss-loader 處理樣式兼容性問(wèn)題
/**
* 安裝的包以及版本為：postcss-loader@4.3.0近哟、postcss-preset-env@6.7.0
* 其中依賴插件 postcss-preset-env 是用來(lái)獲取 package.json 里 browserslist 的配置的驮审，browserslist 的配置如下
"browserslist": [
">0.2%", // 表示至少兼容 99.8% 的瀏覽器
"not op_mini all", // 不需要兼容所有歐朋mini瀏覽器
"last 2 versions", // 需要兼容所有瀏覽器的最新兩個(gè)版本
"not ie <= 8" // 不需要兼容 ie8 一下版本的瀏覽器
],
*/
// 注意該 loader 要在 sass-loader 之后使用， css-loader 之前使用
loader: 'postcss-loader',
options: {
// 修改 postcss-loader 的配置
postcssOptions: {
// 使用插件 postcss-preset-env 讀取 package.json吉执，獲取里面的 browserslist 屬性值作為需要兼容的瀏覽器版本配置
plugins: [['postcss-preset-env']]
}
}
}, 'sass-loader']
},
{
// 匹配以 .png疯淫、.jpg、.jpeg戳玫、.gif熙掺、.svg 為后綴的文件
test: /\.(png|jpe?g|gif|svg)$/i,
// 表示使用 url-loader 處理文件（url-loader依賴file-loader），可以對(duì)圖片進(jìn)行壓縮等其他處理
// 需要安裝的包以及版本：url-loader@1.1.2咕宿、file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法币绩，所以會(huì)導(dǎo)致文件的路徑變成 [object module]蜡秽。
loader: 'url-loader',
// loader 的相關(guān)配置
options: {
// 當(dāng)文件小于 10KB 時(shí)，就會(huì)被 base64 處理类浪，可以減少請(qǐng)求服務(wù)端的次數(shù)
limit: 10 * 1024,
// 打包輸出的文件名
/**
* [name]：原文件的名字
* [hash]：打包時(shí) webpack 為文件生成的 hash 值
* [hash:10]：表示取 hash 值的前 10 位
* [chunckhash]：文件 chunck 的 hash 值载城，在同一個(gè)文件引入的其他文件，生成的 chunckhash 值一樣
* [contenthash]：根據(jù)文件內(nèi)容生成的 hash 值
* [ext]：源文件的后綴
*/
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'image',
// 不使用 es6 模塊化解析费就，解決圖片路徑變成[object module]的問(wèn)題诉瓦，因?yàn)?html-loader 引入的圖片是 commonjs
esModule: false
}
},
{
// 處理 html 中的圖片資源
test: /\.html$/i,
// 上一個(gè)配置不會(huì)處理 html 中的圖片文件，使用 html-loader 引入圖片資源力细，交給 url-loader 處理
// 需要安裝的包以及版本：html-loader@1.1.0
loader: 'html-loader'
},
{
// 處理字體文件
test: /\.(woff2?|eot|ttf|otf)$/i,
use: {
// 需要安裝的包以及版本：url-loader@1.1.2睬澡、file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法，所以會(huì)導(dǎo)致文件的路徑變成 [object module]眠蚂。
loader: 'url-loader',
options: {
// 當(dāng)文件小于 10KB 時(shí)煞聪，就會(huì)被 base64 處理，可以減少請(qǐng)求服務(wù)端的次數(shù)
limit: 10 * 1024,
// 打包輸出的文件名
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'font',
// 不使用 es6 模塊化解析逝慧，解決文件路徑變成[object module]的問(wèn)題
esModule: false
},
}
},
{
// 處理其他文件(排除下列文件都使用 file-loader 處理)
exclude: /\.(css|js|html|less|scss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i,
// 需要安裝的包以及版本：file-loader@3.0.1
// 在 file-loader v4.3.0 版本之后默認(rèn)使用了 esModule 語(yǔ)法昔脯，所以會(huì)導(dǎo)致文件的路徑變成 [object module]。笛臣。
loader: 'file-loader',
options: {
// 打包輸出的文件名
name: '[name]-[contenthash:10].[ext]',
// 打包輸出的文件路徑
outputPath: 'order',
}
},
{
// 使用 babel-loader 處理瀏覽器兼容性問(wèn)題
test: /\.js$/i,
// 排除對(duì) node_modules 目錄下的文件的處理
exclude: /node_modules/,
// 對(duì) src 目錄下的文件進(jìn)行處理
// include: /src/,
/**
* 如果有多個(gè) loader 要處理 js 文件云稚，可以通過(guò) enforce 字段規(guī)定處理順序，可選值如下：
* pre：優(yōu)先執(zhí)行
* normal：正常執(zhí)行
* inline：其次執(zhí)行
* post：最后執(zhí)行
*/
enforce: 'pre',
// 安裝的包以及版本：@babel/core@7.16.0沈堡、@babel/preset-env@7.16.4静陈、babel-loader@8.2.3、core-js@3.19.3
/**
* 包說(shuō)明：
* @babel/core：依賴包
* @babel/preset-env：處理基本的 js 語(yǔ)法兼容性問(wèn)題（箭頭函數(shù)）诞丽、不可以處理高級(jí)的語(yǔ)法（promise等）
* @core-js：處理高級(jí)的 js 語(yǔ)法兼容性問(wèn)題（如promise鲸拥、replaceAll等）
*/
loader: 'babel-loader',
options: {
// 預(yù)設(shè)：指示 babel 做怎樣的兼容只處理和使用哪些插件進(jìn)行處理
presets: [
[
// 處理基本的 js 語(yǔ)法兼容性問(wèn)題（箭頭函數(shù)）、不可以處理高級(jí)的語(yǔ)法（promise等）
'@babel/preset-env',
{
// 按需加載
useBuiltIns: 'usage',
corejs: {
// 指定 core-js 的版本僧免，要與安裝的包的大版本一致
version: 3
},
// 需要達(dá)到的目標(biāo)刑赶，必須要兼容的瀏覽器
targets: {
chrome: '60', // 至少要兼容 chrome 60 以上
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
// 插件相關(guān)配置
plugins: [
// 使用 html-webpack-plugin 處理 html 模板
// 如果不傳遞參數(shù)，默認(rèn)會(huì)創(chuàng)建一個(gè)空的 html 模板懂衩，并自動(dòng)引入打包好的其他文件資源
new HtmlWebpackPlugin({
// 以當(dāng)前路徑下的 index.html 文件為模板創(chuàng)建一個(gè)html文件角撞，并自動(dòng)引入打包文件
template: path.resolve(__dirname, 'index.html'),
// 聲明創(chuàng)建的 html 模板文件名
filename: 'index.html',
// 壓縮 html 模板的配置
minify: {
// 是否刪除多余的 html 屬性引號(hào)
removeAttributeQuotes: true,
// 是否刪除空格、換行
collapseWhitespace: true,
// 是否刪除注釋
removeComments: true
}
}),
// 用來(lái)清空打包目錄下的所有文件和目錄
// 安裝的包以及版本為：clean-webpack-plugin@3.0.0
new CleanWebpackPlugin(),
// 用來(lái)處理 css 樣式勃痴，提取為單獨(dú)文件（還需要在 loader 中配置）
// 安裝的包以及版本為：mini-css-extract-plugin@0.9.0
new MiniCssExtractPlugin({
// 對(duì)生成的css文件進(jìn)行重命名
filename: 'css/[contenthash:10].css'
}),
// 用來(lái)壓縮打包后的 css，去掉多余的空格热康、注釋等
new OptimizeCssAssetsWebpackPlugin(),
// eslint 代碼檢查
// 需要安裝的包以及配置：eslint@8.4.1沛申、eslint-config-airbnb-base@15.0.0、eslint-plugin-import@2.25.3姐军、eslint-webpack-plugin@3.1.1
/**
* 包作用說(shuō)明
* eslint-config-airbnb-base：安裝 airbnb-base 這種 js 代碼規(guī)范配置
* eslint-plugin-import：用于讀取代碼規(guī)范配置铁材，會(huì)獲取 package.json 文件里面的 eslintConfig 配置信息尖淘。
"eslintConfig": {
"extends": "airbnb-base"
}
*/
new EslintWebpackPlugin({
// 是否啟用代碼自動(dòng)修復(fù)功能，啟用會(huì)修改源代碼著觉，一般不啟用
fix: true
})
],
// 設(shè)置webpack的打包環(huán)境村生，可選值有production（生產(chǎn)環(huán)境）、development（開(kāi)發(fā)環(huán)境）饼丘、none
mode: 'development',
// 開(kāi)發(fā)服務(wù)器 devServer：用來(lái)自動(dòng)構(gòu)建（自動(dòng)打包趁桃、自動(dòng)啟動(dòng)瀏覽器、熱更新肄鸽、解決跨域等問(wèn)題）
// 需要安裝的包以及版本：webpack-dev-server@3.11.2
// 運(yùn)行指令：npx webpack-dev-server
devServer: {
// 是否自動(dòng)啟動(dòng)瀏覽器
open: true,
// 是否啟用 gzip 壓縮
compress: true,
// 服務(wù)器運(yùn)行的端口號(hào)
port: 3000
}
}
package.json
{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.19.3",
"css-loader": "^2.1.1",
"eslint": "^8.4.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.3",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^3.0.1",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.5.2",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.3.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.11.2"
},
"browserslist": [
">0.2%",
"not op_mini all",
"last 2 versions",
"not ie <= 8"
],
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
}
