Webpack
實際項目（持續(xù)更新）： https://github.com/devin-huang/webpack4.x_Course，喜歡的給星支持
本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。當(dāng) webpack 處理應(yīng)用程序時，它會在內(nèi)部構(gòu)建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每個模塊捧毛，并生成一個或多個 bundle。
WebPack與Grunt让网、Gulp相比特性
Webpack和Gulp/Grunt并沒有太多的可比性呀忧，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案溃睹，不過Webpack的優(yōu)點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具而账。
npm install
npm install
1.安裝到項目 node_modules;
2.不會將依賴寫入 devDependencies 或 dependencies;
3.npm install 初始化項目時不會下載
npm install -g
1.不安裝到項目 node_modules;
2.不會將依賴寫入 devDependencies或dependencies;
3. npm install 初始化項目時不會下載
npm install -save
1.安裝到項目 node_modules;
2.將依賴寫入 dependencies;
3.npm install 初始化項目時下載;
4. npm install --production 或注明NODE_ENV變量值為 production 時，自動下載依賴到 node_modules 目錄
npm install --save-dev
1.安裝依賴到項目 node_modules;
2. 將依賴寫入 devDependencies;
3.npm install 初始化項目時下載依賴;
4. npm install --production或注明NODE_ENV變量值為 production 時因篇，不會自動下載依賴到 node_modules 目錄
**生產(chǎn)環(huán)境福扬，使用npm install --production 安裝 dependencies 部分的模塊**
**開發(fā)環(huán)境，npm install 惜犀，安裝所有 devDependencies 和 dependencies 里面的模塊**
初始化項目結(jié)構(gòu)
這里配置Webpack 必須要安裝三個依賴
webpackwebpack-cliwebpack-dev-server
具體實現(xiàn)可參考源碼
項目目錄結(jié)構(gòu)
|- build webpack模塊化打包配置(使用cross-env方式，二選一種方式)
|- build-env webpack模塊化打包配置(使用env方式狠裹，二選一種方式)
|- config 環(huán)境變量得配置
|- /src 目標(biāo)打包路徑
|- assets 靜態(tài)資源
|- style 樣式資源
|- index.js 主文件入口
|- index.html 模板文件
|- eslintrc.js eslint規(guī)范配置
|- .gitgnore Git配置
|- package.json 項目依賴
|- postcss.config.js 項目兼容瀏覽器版本配置
- Entry：入口叫乌，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始块请，可抽象成輸入。
- Output：輸出結(jié)果，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果界拦。
- Module：模塊，在 Webpack 里一切皆模塊魄健，一個模塊對應(yīng)著一個文件妄荔。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
- Chunk：代碼塊迄薄，一個 Chunk 由多個模塊組合而成琅关，用于代碼合并與分割。
- Loader：模塊轉(zhuǎn)換器讥蔽，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容涣易。
- Plugin：擴展插件画机，在 Webpack 構(gòu)建流程中的特定時機注入擴展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。
devtool 映射
當(dāng)JS發(fā)現(xiàn)錯誤時準(zhǔn)確定位到源文件位置） devtool配置
開發(fā)環(huán)境：cheap-module-eval-source-map
生產(chǎn)環(huán)境：source-map
optimization 優(yōu)化
優(yōu)化Webpack
minimizer： CSS/JS壓縮
runtimeChunk/splitChunks： JavaScript代碼抽離
app 開發(fā)編寫的代碼
runtime 將包含chunks 映射關(guān)系的 list單獨從 app.js里提取出來
vendors 第三方依賴框架/庫
resolve 解析
配置Webpack簡寫
extensions 根據(jù)配置內(nèi)容可以省略引用文件的后綴名新症，依順序搜索
alias 指定名稱來替代（第三方框架/路徑等）
externals 擴展
< CDN引用第三方依賴步氏， 首先聲明免除打包指定第三方依賴，再把ProvidePlugin對應(yīng)依賴庫刪除,并在index.html中直接引用CDN
plugin
webpack.ProvidePlugin 按需載入第三方框架/庫
webpack.DefinePlugin 根據(jù)環(huán)境變量定義自定義變量（僅JavaScript調(diào)用徒爹，非node.js調(diào)用）
html-webpack-plugin 自動將腳本資源在模板文件內(nèi)引用
mini-css-extract-plugin 將樣式抽離成獨立文件并在模板文件內(nèi)引用
webpack-bundle-analyzer 分析項目中占用大空間模塊使用CDN引用減輕大小
copy-webpack-plugin 復(fù)制資源
webpack-merge 合并webpack配置
CleanWebpackPlugin 清除文件夾/文件
OptimizeCSSAssetsPlugin 壓縮 CSS
UglifyJsPlugin 壓縮 JavaScript
優(yōu)化策略
1.dllPlugin 打包項目時將第三方框架/插件抽離直接再dist/html引用
2.happypack 多線程打包
環(huán)境變量
根據(jù)環(huán)境變量模塊化打包
package.json
運行跨平臺設(shè)置和使用環(huán)境變量
npm install --save-dev cross-env
// 使用cross-env切換環(huán)境變量
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js --open --progress",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js",
// 使用node內(nèi)置方式切換環(huán)境變量
"dev:env": "webpack-dev-server --env development --open --config build-env/webpack.common.js",
"build:env": "webpack --env production --config build-env/webpack.common.js"
根據(jù)環(huán)境變量配置路徑
實際開發(fā)中需要對不同環(huán)境的API/圖片/登錄等進行配置荚醒，所以需要項目目錄結(jié)構(gòu)：
config存放不同環(huán)境變量的資源路徑配置， 再用環(huán)境變量模塊化打包時指定引用資源路徑配置隆嗅，保存到webpack.DefinePlugin從而前端能獲取資源路徑
config/prod.env.js
module.exports = {
'API_ROOT': JSON.stringify('http://localhost:8080'),
'LOGIN_URL': JSON.stringify('http://localhost:8080.prod/login'),
'IMAGE_URL': JSON.stringify('http://localhost:8080.prod/image')
}
webpack.prod.js
const env = require('../config/prod.env')
plugins: [
new webpack.DefinePlugin({
'process.env': env
})
]
其他
html-loader 與 html-webpack-plugin 結(jié)合使用有沖突
vue-cli3 使用https://github.com/neutrinojs/webpack-chain#getting-started
tree shaking 將模塊中未引用的代碼對象排除引入 （默認生產(chǎn)環(huán)境自動壓縮已排除）
