webpack 的核心價(jià)值就是前端源碼的打包，即將前端源碼中每一個(gè)文件（無論任何類型）都當(dāng)做一個(gè) pack 佃蚜，然后分析依賴夭咬，將其最終打包出線上運(yùn)行的代碼。webpack 的四個(gè)核心部分
entry 規(guī)定入口文件，一個(gè)或者多個(gè)
output 規(guī)定輸出文件的位置
loader 各個(gè)類型的轉(zhuǎn)換工具
plugin 打包過程中各種自定義功能的插件
webpack 如今已經(jīng)進(jìn)入 v4.x 版本加派，v5.x 估計(jì)也會(huì)很快發(fā)布叫确。不過看 v5 的變化相比于 v4 ，常用的配置沒有變芍锦，這是一個(gè)好消息竹勉，說明基本穩(wěn)定。
前端工程師需要了解的 webpack
前端工程化是近幾年前端發(fā)展迅速的主要推手之一娄琉，webpack 無疑是前端工程化的核心工具次乓。目前前端工程化工具還沒有到一鍵生成，或者重度繼承到某個(gè) IDE 中（雖然有些 cli 工具可以直接創(chuàng)建）孽水，還是需要開發(fā)人員手動(dòng)做一些配置票腰。
因此，作為前端開發(fā)人員匈棘，熟練應(yīng)用 webpack 的常用配置丧慈、常用優(yōu)化方案是必備的技能 ―― 這也正是本文的內(nèi)容。另外主卫，webpack 的實(shí)現(xiàn)原理算是一個(gè)加分項(xiàng)逃默，不要求所有開發(fā)人員掌握，本文也沒有涉及簇搅。
基礎(chǔ)配置
初始化環(huán)境
npm init -y 初始化 npm 環(huán)境完域，然后安裝 webpack npm i webpack webpack-cli -D
新建 src 目錄并在其中新建 index.js ，隨便寫點(diǎn) console.log('index js') 瘩将。然后根目錄創(chuàng)建 webpack.config.js 吟税，內(nèi)容如下
const?path?=?require('path')
module.exports?=?{
//?mode?可選?development?或?production?，默認(rèn)為后者
//?production?會(huì)默認(rèn)壓縮代碼并進(jìn)行其他優(yōu)化（如?tree?shaking）
mode:?'development',
entry:?path.join(__dirname,?'src',?'index'),
output:?{
filename:?'bundle.js',
path:?path.join(__dirname,?'dist')
}
}
然后增加 package.json 的 scripts
"scripts":?{
"build":?"webpack"
},
然后運(yùn)行 npm run build 即可打包文件到 dist 目錄姿现。
區(qū)分 dev 和 build
使用 webpack 需要兩個(gè)最基本的功能：第一肠仪，開發(fā)的代碼運(yùn)行一下看看是否有效；第二备典，開發(fā)完畢了將代碼打包出來异旧。這兩個(gè)操作的需求、配置都是完全不一樣的提佣。例如吮蛹，運(yùn)行代碼時(shí)不需要壓縮以便 debug ，而打包代碼時(shí)就需要壓縮以減少文件體積拌屏。因此专筷，這里我們還是先把兩者分開酝惧，方便接下來各個(gè)步驟的講解。
首先，安裝?npm i webpack-merge -D?责嚷，然后根目錄新建 build 目錄，其中新建如下三個(gè)文件。
//?webpack.common.js?公共的配置
const?path?=?require('path')
const?srcPath?=?path.join(__dirname,?'..',?'src')
const?distPath?=?path.join(__dirname,?'..',?'dist')
module.exports?=?{
entry:?path.join(srcPath,?'index')
}
//?webpack.dev.js?運(yùn)行代碼的配置（該文件暫時(shí)用不到，先創(chuàng)建了带兜，下文會(huì)用到）
const?path?=?require('path')
const?webpackCommonConf?=?require('./webpack.common.js')
const?{?smart?}?=?require('webpack-merge')
const?srcPath?=?path.join(__dirname,?'..',?'src')
const?distPath?=?path.join(__dirname,?'..',?'dist')
module.exports?=?smart(webpackCommonConf,?{
mode:?'development'
})
//?webpack.prod.js?打包代碼的配置
const?path?=?require('path')
const?webpackCommonConf?=?require('./webpack.common.js')
const?{?smart?}?=?require('webpack-merge')
const?srcPath?=?path.join(__dirname,?'..',?'src')
const?distPath?=?path.join(__dirname,?'..',?'dist')
module.exports?=?smart(webpackCommonConf,?{
mode:?'production',
output:?{
filename:?'bundle.[contentHash:8].js',?//?打包代碼時(shí)，加上?hash?戳
path:?distPath,
//?publicPath:?'http://cdn.abc.com'?//?修改所有靜態(tài)文件?url?的前綴（如?cdn?域名）吨灭，這里暫時(shí)用不到
}
})
修改 package.json 中的 scripts
"scripts":?{
"build":?"webpack?--config?build/webpack.prod.js"
},
重新運(yùn)行 npm run build 即可看到打包出來的代碼刚照。最后，別忘了將根目錄下的 webpack.config.js 刪除喧兄。
這將引發(fā)一個(gè)新的問題：js 代碼中將如何判斷是什么環(huán)境呢无畔？需要借助 webpack.DefinedPlugin 插件來定義全局變量》驮可以在 webpack.dev.js 和 webpack.prod.js 中做如下配置：
//?引入?webpack
const?webpack?=?require('webpack')
//?增加?webpack?配置
plugins:?[
new?webpack.DefinePlugin({
//?注意：此處?webpack.dev.js?中寫?'development'?浑彰，webpack.prod.js?中寫?'production'
ENV:?JSON.stringify('development')
})
最后，修改 src/index.js 只需加入一行 console.log(ENV) 拯辙，然后重啟 npm run dev 即可看到效果郭变。
JS 模塊化
webpack 默認(rèn)支持 js 各種模塊化，如常見的 commonJS 和 ES6 Module 涯保。但是推薦使用 ES6 Module 诉濒，因?yàn)?production 模式下，ES6 Module 會(huì)默認(rèn)觸發(fā) tree shaking 夕春，而 commonJS 則沒有這個(gè)福利未荒。究其原因，ES6 Module 是靜態(tài)引用及志，在編譯時(shí)即可確定依賴關(guān)系片排，而 commonJS 是動(dòng)態(tài)引用。
不過使用 ES6 Module 時(shí)速侈，ES6 的解構(gòu)賦值語法這里有一個(gè)坑率寡，例如 index.js 中有一行?import {fn, name} from './a.js'?，此時(shí) a.js 中有以下幾種寫法倚搬，大家要注意冶共！
//?正確寫法一
export?function?fn()?{
console.log('fn')
}
export?const?name?=?'b'
//?正確寫法二
function?fn()?{
console.log('fn')
}
const?name?=?'b'
export?{
fn,
name
}
//?錯(cuò)誤寫法
function?fn()?{
console.log('fn')
}
export?default?{
fn,
name:?'b'
}
該現(xiàn)象的具體原因可參考https://www.jb51.net/article/162079.htm?。下文馬上要講解啟動(dòng)本地服務(wù)潭枣，讀者可以馬上寫一個(gè) demo 自己驗(yàn)證一下這個(gè)現(xiàn)象。
啟動(dòng)本地服務(wù)
上文創(chuàng)建的 webpack.dev.js 一直沒使用幻捏，下面就要用起來盆犁。
使用 html
啟動(dòng)本地服務(wù)，肯定需要一個(gè) html 頁面作為載體篡九，新建一個(gè) src/index.html 并初始化內(nèi)容
<!DOCTYPE?html>
<html>
<head><title>Document</title></head>
<body>
<p>this?is?index?html</p>
</body>
</html>
要使用這個(gè) html 文件谐岁，還需要安裝 npm i html-webpack-plugin -D ，然后配置 build/webpack.common.js ，因?yàn)闊o論 dev 還是 prod 都需要打包 html 文件伊佃。
plugins:?[
new?HtmlWebpackPlugin({
template:?path.join(srcPath,?'index.html'),
filename:?'index.html'
})
]
重新運(yùn)行 npm run build 會(huì)發(fā)現(xiàn)打包出來了 dist/index.html 窜司，且內(nèi)部已經(jīng)自動(dòng)插入了打包的 js 文件。
webpack-dev-server
有了 html 和 js 文件航揉，就可以啟動(dòng)服務(wù)了塞祈。首先安裝 npm i webpack-dev-server -D ，然后打開 build/webpack.dev.js配置帅涂。只有運(yùn)行代碼才需要本地 server 议薪，打包代碼時(shí)不需要。
devServer:?{
port:?3000,
progress:?true,?//?顯示打包的進(jìn)度條
contentBase:?distPath,?//?根目錄
open:?true,?//?自動(dòng)打開瀏覽器
compress:?true?//?啟動(dòng)?gzip?壓縮
}
打開 package.json 修改 scripts 媳友，增加 "dev": "webpack-dev-server --config build/webpack.dev.js", 斯议。然后運(yùn)行 npm run dev ，打開瀏覽器訪問 localhost:3000 即可看到效果醇锚。
解決跨域
實(shí)際開發(fā)中哼御，server 端提供的端口地址和前端可能不同，導(dǎo)致 ajax 收到跨域限制焊唬。使用 webpack-dev-server 可配置代理恋昼，解決跨域問題。如有需要求晶，在 build/webpack.dev.js 中增加如下配置焰雕。
devServer:?{
//?設(shè)置代理
proxy:?{
//?將本地?/api/xxx?代理到?localhost:3000/api/xxx
'/api':?'http://localhost:3000',
//?將本地?/api2/xxx?代理到?localhost:3000/xxx
'/api2':?{
target:?'http://localhost:3000',
pathRewrite:?{
'/api2':?''
}
}
}
處理 ES6
使用 babel
由于現(xiàn)在瀏覽器還不能保證完全支持 ES6 ，將 ES6 編譯為 ES5 芳杏，需要借助 babel 這個(gè)神器矩屁。安裝 babel npm i babel-loader @babel/core @babel/preset-env -D ，然后修改 build/webpack.common.js 配置
module:?{
rules:?[
{
test:?/\.js$/,
loader:?['babel-loader'],
include:?srcPath,
exclude:?/node_modules/
},
]
},
還要根目錄下新建一個(gè) .babelrc json 文件爵赵，內(nèi)容下
{
"presets":?["@babel/preset-env"],
"plugins":?[]
}
在 src/index.js 中加入一行 ES6 代碼吝秕，如箭頭函數(shù) const fn = () => { console.log('this is fn') } 。然后重新運(yùn)行 npm run dev空幻，可以看到瀏覽器中加載的 js 中烁峭，這個(gè)函數(shù)已經(jīng)被編譯為 function 形式。
使用高級(jí)特性
babel 可以解析 ES6 大部分語法特性秕铛，但是無法解析 class 约郁、靜態(tài)屬性、塊級(jí)作用域但两，還有很多大于 ES6 版本的語法特性鬓梅，如裝飾器。因此谨湘，想要把日常開發(fā)中的 ES6 代碼全部轉(zhuǎn)換為 ES5 绽快，還需要借助很多 babel 插件芥丧。
安裝 npm i @babel/plugin-proposal-class-properties @babel/plugin-transform-block-scoping @babel/plugin-transform-classes -D ，然后配置 .babelrc
{
"presets":?["@babel/preset-env"],
"plugins":?[
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-block-scoping",
"@babel/plugin-transform-classes"
]
}
在 src/index.js 中新增一段 class 代碼坊罢，然后重新運(yùn)行 npm run build 续担，打包出來的代碼會(huì)將 class 轉(zhuǎn)換為 function 形式。
source map
source map 用于反解析壓縮代碼中錯(cuò)誤的行列信息活孩，dev 時(shí)代碼沒有壓縮物遇，用不到 source map ，因此要配置 build/webpack.prod.js
//?webpack?中?source?map?的可選項(xiàng)诱鞠，是情況選擇一種：
//?devtool:?'source-map'?//?1.?生成獨(dú)立的?source?map?文件
//?devtool:?'eval-source-map'?//?2.?同?1?挎挖，但不會(huì)產(chǎn)生獨(dú)立的文件，集成到打包出來的?js?文件中
//?devtool:?'cheap-module-source-map'?//?3.?生成單獨(dú)的?source?map?文件航夺，但沒有列信息（因此文件體積較薪抖洹）
devtool:?'cheap-module-eval-source-map'?//?4.?同?3?，但不會(huì)產(chǎn)生獨(dú)立的文件阳掐，集成到打包出來的?js?文件中
生產(chǎn)環(huán)境下推薦使用 1 或者 3 始衅，即生成獨(dú)立的 map 文件。修改之后缭保，重新運(yùn)行 npm run build 汛闸，會(huì)看到打包出來了 map 文件。
處理樣式
在 webpack 看來艺骂，不僅僅是 js 诸老，其他的文件也是一個(gè)一個(gè)的模塊，通過相應(yīng)的 loader 進(jìn)行解析并最終產(chǎn)出钳恕。
處理 css
安裝必要插件 npm i style-loader css-loader -D 别伏，然后配置 build/webpack.common.js
module:?{
rules:?[
{?/*?js?loader?*/?},
{
test:?/\.css$/,
loader:?['style-loader',?'css-loader']?//?loader?的執(zhí)行順序是：從后往前
}
]
},
新建一個(gè) css 文件，然后引入到 src/index.js 中 import './css/index.css' 忧额，重新運(yùn)行 npm run dev 即可看到效果厘肮。
處理 less
less sass 都是常用 css 預(yù)處理語言，以 less 為例講解睦番。安裝必要插件 npm i less less-loader -D 类茂，然后配置 build/webpack.common.js
{
test:?/\.less$/,
loader:?['style-loader',?'css-loader',?'less-loader']?//?增加?'less-loader'?，注意順序
}
新建一個(gè) less 文件托嚣，然后引入到 src/index.js 中 import './css/index.less' 巩检，重新運(yùn)行 npm run dev 即可看到效果。
自動(dòng)添加前綴
一些 css3 的語法示启，例如 transform: rotate(45deg); 為了瀏覽器兼容性需要加一些前綴兢哭，如 webkit- ，可以通過 webpack 來自動(dòng)添加丑搔。安裝 npm i postcss-loader autoprefixer -D 厦瓢，然后配置
{
test:?/\.css$/,
loader:?['style-loader',?'css-loader',?'postcss-loader']?//?增加?'postcss-loader'?，?注意順序
}
還要新建一個(gè) postcss.config.js 文件啤月，內(nèi)容是
module.exports?=?{
plugins:?[require('autoprefixer')]
}
重新運(yùn)行 npm run dev 即可看到效果煮仇，自動(dòng)增加了必要的前綴。
抽離 css 文件
默認(rèn)情況下谎仲，webpack 會(huì)將 css 代碼全部寫入到 html 的 <style> 標(biāo)簽中浙垫，但是打包代碼時(shí)需要抽離到單獨(dú)的 css 文件中。安裝 npm i mini-css-extract-plugin -D 然后配置 build/webpack.prod.js（打包代碼時(shí)才需要郑诺，運(yùn)行時(shí)不需要）
//?引入插件
const?MiniCssExtractPlugin?=?require('mini-css-extract-plugin')
//?增加?webpack?配置
module:?{
rules:?[
{
test:?/\.css$/,
loader:?[
MiniCssExtractPlugin.loader,?//?注意夹姥，這里不再用?style-loader
'css-loader',
'postcss-loader'
]
}
]
},
plugins:?[
new?MiniCssExtractPlugin({
filename:?'css/main.[contentHash:8].css'
})
]
如需要壓縮 css ，需要安裝 npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D 辙诞，然后增加配置
//?引入插件
const?TerserJSPlugin?=?require('terser-webpack-plugin')
const?OptimizeCSSAssetsPlugin?=?require('optimize-css-assets-webpack-plugin')
//?增加?webpack?配置
optimization:?{
minimizer:?[new?TerserJSPlugin({}),?new?OptimizeCSSAssetsPlugin({})],
},
運(yùn)行 npm run build 即可看到打包出來的 css 是獨(dú)立的文件辙售，并且是被壓縮過的。
處理圖片
要在 js 中 import 圖片飞涂，或者在 css 中設(shè)置背景圖片旦部。安裝 npm i file-loader -D 然后配置 build/webpack.common.js
{
test:?/\.(png|jpg|gif)$/,
use:?'file-loader'
}
如果想要處理 html 代碼中 <img src="..."/> 的形式，則安裝 npm i html-withimg-loader -D 然后配置 build/webpack.common.js
{
test:?/\.html$/,
use:?'html-withimg-loader'
}
打包之后较店，dist 目錄下會(huì)生成一個(gè)類似 917bb63ba2e14fc4aa4170a8a702d9f8.jpg 的文件士八，并被引入到打包出來的結(jié)果中。
如果想要將小圖片用 base64 格式產(chǎn)出梁呈，則安裝 npm i url-loader -D 婚度，然后配置 build/webpack.common.js
{
test:?/\.(png|jpg|gif)$/,
use:?{
loader:?'url-loader',
options:?{
//?小于?5kb?的圖片用?base64?格式產(chǎn)出
//?否則，依然延用?file-loader?的形式官卡，產(chǎn)出?url?格式
limit:?5?*?1024,
//?打包到?img?目錄下
outputPath:?'/img/',
//?設(shè)置圖片的?cdn?地址（也可以統(tǒng)一在外面的?output?中設(shè)置蝗茁，那將作用于所有靜態(tài)資源）
//?publicPath:?'http://cdn.abc.com'
}
}
},
多頁應(yīng)用
src 下有 index.js index.html 和 other.js other.html ，要打包輸出兩個(gè)頁面味抖，且分別引用各自的 js 文件评甜。
第一，配置輸入輸出
entry:?{
index:?path.join(srcPath,?'index.js'),
other:?path.join(srcPath,?'other.js')
},
output:?{
filename:?'[name].[contentHash:8].js',?//?[name]?表示?chunk?的名稱仔涩，即上面的?index?和?other
path:?distPath
},
第二忍坷，配置 html 插件
plugins:?[
//?生成?index.html
new?HtmlWebpackPlugin({
template:?path.join(srcPath,?'index.html'),
filename:?'index.html',
//?chunks?表示該頁面要引用哪些?chunk?（即上面的?index?和?other），默認(rèn)全部引用
chunks:?['index']?//?只引用?index.js
}),
//?生成?other.html
new?HtmlWebpackPlugin({
template:?path.join(srcPath,?'other.html'),
filename:?'other.html',
chunks:?['other']?//?只引用?other.js
}),
抽離公共代碼
公共模塊
多個(gè)頁面或者入口熔脂，如果引用了同一段代碼佩研，如上文的多頁面例子中，index.js 和 other.js 都引用了 import './common.js' 霞揉，則 common.js 應(yīng)該被作為公共模塊打包旬薯。webpack v4 開始棄用了 commonChunkPlugin 改用 splitChunks ，可修改 build/webpack.prod.js 中的配置
optimization:?{
//?分割代碼塊
splitChunks:?{
//?緩存分組
cacheGroups:?{
//?公共的模塊
common:?{
chunks:?'initial',
minSize:?0,?//?公共模塊的大小限制
minChunks:?2?//?公共模塊最少復(fù)用過幾次
}
}
}
},
重新運(yùn)行 npm run build 适秩，即可看到有 common 模塊被單獨(dú)打包出來绊序，就是 common.js 的內(nèi)容硕舆。
第三方模塊
同理，如果我們的代碼中引用了 jquery lodash 等骤公，也希望將第三方模塊單獨(dú)打包抚官，和自己開發(fā)的業(yè)務(wù)代碼分開。這樣每次重新上線時(shí)阶捆，第三方模塊的代碼就可以借助瀏覽器緩存凌节，提高用戶訪問網(wǎng)頁的效率。修改配置文件洒试，增加下面的 vendor: {...} 配置倍奢。
optimization:?{
//?分割代碼塊
splitChunks:?{
//?緩存分組
cacheGroups:?{
//?第三方模塊
vendor:?{
priority:?1,?//?權(quán)限更高，優(yōu)先抽離垒棋，重要Ｗ渖贰！叼架！
test:?/node_modules/,
chunks:?'initial',
minSize:?0,?//?大小限制
minChunks:?1?//?最少復(fù)用過幾次
},
//?公共的模塊
common:?{
chunks:?'initial',
minSize:?0,?//?公共模塊的大小限制
minChunks:?2?//?公共模塊最少復(fù)用過幾次
}
}
}
},
重啟 npm run build 跷坝，即可看到 vendor 模塊被打包出來，里面是 jquery 或者 lodash 等第三方模塊的內(nèi)容碉碉。
懶加載
webpack 支持使用 import(...) 語法進(jìn)行資源懶加載柴钻。安裝 npm i @babel/plugin-syntax-dynamic-import -D 然后將插件配置到 .babelrc 中。
新建 src/dynamic-data.js 用于測(cè)試垢粮，內(nèi)容是 export default { message: 'this is dynamic' } 贴届。然后在 src/index.js 中加入
setTimeout(()?=>?{
import('./dynamic-data.js').then(res?=>?{
console.log(res.default.message)?//?注意這里的?default
})
},?1500)
重新運(yùn)行 npm run dev 刷新頁面，可以看到 1.5s 之后打印出 this is dynamic 蜡吧。而且毫蚓，dynamic-data.js 也是 1.5s 之后被加載進(jìn)瀏覽器的 ―― 懶加載，雖然文件名變了昔善。
重新運(yùn)行 npm run build 也可以看到 dynamic-data.js 的內(nèi)容被打包一個(gè)單獨(dú)的文件中元潘。
常見性能優(yōu)化
tree shaking
使用 import 引入，在 production 環(huán)境下君仆，webpack 會(huì)自動(dòng)觸發(fā) tree shaking 翩概，去掉無用代碼。但是使用 require 引入時(shí)返咱，則不會(huì)觸發(fā) tree shaking钥庇。這是因?yàn)?require 是動(dòng)態(tài)引入，無法在編譯時(shí)判斷哪些功能被使用咖摹。而 import 是靜態(tài)引入评姨，編譯時(shí)即可判斷依賴關(guān)系。
noParse
不去解析某些 lib 其內(nèi)部的依賴萤晴，即確定這些 lib 沒有其他依賴吐句，提高解析速度胁后。可配置到 build/wepback.common.js 中
module:?{
noParse:?/jquery|lodash/,?//?不解析?jquery?和?lodash?的內(nèi)部依賴
ignorePlugin
以常用的 moment 為例嗦枢。安裝 npm i moment -d 并且 import moment from 'moment' 之后择同，monent 默認(rèn)將所有語言的 js 都加載進(jìn)來，使得打包文件過大净宵。可以通過 ignorePlugin 插件忽略 locale 下的語言文件裹纳，不打包進(jìn)來择葡。
plugins:?[
new?webpack.IgnorePlugin(/\.\/locale/,?/moment/),?//?忽略?moment?下的?/locale?目錄
這樣，使用時(shí)可以手動(dòng)引入中文包剃氧，并設(shè)置語言
import?moment?from?'moment'
import?'moment/locale/zh-cn'?//?手動(dòng)引入中文語言包
moment.locale('zh-cn')
const?r?=?moment().endOf('day').fromNow()
console.log(r)
happyPack
多進(jìn)程打包敏储，參考?https://www.npmjs.com/package/happypack?。注意朋鞍，小項(xiàng)目使用反而會(huì)變慢已添。只有項(xiàng)目較大，打包出現(xiàn)明顯瓶頸時(shí)滥酥，才考慮使用 happypack 更舞。
常用插件和配置
ProvidePlugin
如要給所有的 js 模塊直接使用 $ ，不用每次都 import $ from 'jquery' 坎吻，可做如下配置
plugins:?[
new?webpack.ProvidePlugin({
$:?'jquery'
}),
externals
如果 jquery 已經(jīng)在 html 中通過 cdn 引用了缆蝉，無需再打包，可做如下配置
externals:?{
jquery:?'jQuery'
},
alias
設(shè)置 alias 別名在實(shí)際開發(fā)中比較常用瘦真，尤其是項(xiàng)目較大刊头，目錄較多時(shí)≈罹。可做如下配置
resolve:?{
alias:?{
Utilities:?path.join(srcPath,?'utilities')
}
},
在該配置之前原杂，可能需要 import Utility from '../../utilities/utility' 使用。配置之后就可以 import Utility from 'Utilities/utility' 使用您机，一來書寫簡(jiǎn)潔穿肄，二來不用再考慮相對(duì)目錄的層級(jí)關(guān)系。
extensions
如果引用文件時(shí)沒有寫后綴名际看，可以通過 extensions 來匹配被碗。
resolve:?{
extensions:?[".js",?".json"]
},
clean-webpack-plugin
由于使用了 contentHash ，每次 build 時(shí)候都可能打包出不同的文件仿村，因此要及時(shí)清理 dist 目錄锐朴。安裝 npm i clean-webpack-plugin -D ，然后在 build/webpack.prod.js 中配置
//?引入插件
const?CleanWebpackPlugin?=?require('clean-webpack-plugin')
//?增加配置
plugins:?[
new?CleanWebpackPlugin(),?//?默認(rèn)清空?output.path?目錄
copy-webpack-plugin
build 時(shí)蔼囊，將 src 目錄下某個(gè)文件或者文件夾焚志，無條件的拷貝到 dist 目錄下衣迷，例如 src/doc 目錄拷貝過去。安裝 npm i copy-webpack-plugin -D酱酬，然后在 build/webpack.prod.js 中配置
//?引入插件
const?CopyWebpackPlugin?=?require('copy-webpack-plugin')
//?增加配置
plugins:?[
new?CopyWebpackPlugin([
{
from:?path.join(srcPath,?'doc'),?//?將?src/doc?拷貝到?dist/doc
to:?path.join(distPath,?'doc')
}
]),
bannerPlugin
代碼的版權(quán)聲明壶谒，在 build/webpack.prod.js 中配置即可。
plugins:?[
new?webpack.BannerPlugin('by?github.com/wangfupeng1988?\r'),
總結(jié)
webpack 發(fā)展至今配置非常多膳沽，該視頻中也沒有全部講解出來汗菜，只是一些實(shí)際開發(fā)中常用的。其他的配置可以去看官網(wǎng)文檔挑社。
您可能感興趣的文章:
babel7.x和webpack4.x配置vue項(xiàng)目的方法步驟
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
詳解多頁應(yīng)用 Webpack4 配置優(yōu)化與踩坑記錄
文章同步發(fā)布：?https://www.geek-share.com/detail/2770037894.html
