?一割卖、常見需求

1、簡單配置入口和出口启上，實現(xiàn)build打包功能。

入口配置（建議在配置入口文件時使用絕對路徑）

出口配置（在配置出口時只能使用絕對路徑）

[chunkhash] 生成hash字符串的方式：每次打包惯退，webpack根據(jù)當前chunk進行計算，如果發(fā)現(xiàn)有代碼變化从藤，就生成新的hash名催跪；如果當前chunk沒有代碼變化，生成的hash名和上一次一樣夷野。

filename: 'js/[name].[chunkhash].js', // 格式化字符串

2懊蒸、配置本地服務，以便開發(fā)環(huán)境

webpack-dev-server 它是基于express悯搔、sockjs的一個node服務器骑丸。全局、本地都安裝。

本地服務只對development環(huán)境起作用

3通危、自動清除dist目錄铸豁，添加文件hash值，開啟編譯進度條菊碟、開啟代碼壓縮

自動清除dist目錄

v5:output出口配置中添加 clean:true

如果是v4节芥，用 clean-webpack-plugin

添加文件hash值

filename: 'js/[name].[chunkhash].js', // 格式化字符串

開啟編譯進度條

plugins中設置 new webpack.ProgressPlugin()

開啟代碼壓縮

optimization:{ minimize:true, minimizer:[new TerserPlugin()] }

4、區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境逆害。

const common = require('./common')

const build = require('./build')

const serve = require('./serve')

const { merge } =require('webpack-merge')

module.exports = env => merge(common, env.development?serve:build)

mode區(qū)分

5头镊、在當前環(huán)境支持圖片的模塊化

v4的寫法

{ test: /\.(png|jpg|jpeg|gif|webp|svg)$/, use: ['url-loader'] },

{ test: /\.(png|jpg|jpeg|gif|webp|svg)$/, use: ['file-loader'] },

v5的寫法

{ test: /\.(png|svg|jpg|jpeg|gif)$/, type: 'asset/resource' },

6、在當前環(huán)境中支持樣式的模塊化

css-loader魄幕、style-loader相艇、css抽離

處理樣式模塊（v4和v5的寫法是一樣的）

{ test: /\.(css|scss|sass)$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },

注意1：當同一個項目中使用sass、less纯陨、postcss坛芽、stylus等多種css預處理器時，我們要分別編寫多條樣式模塊的解析規(guī)則翼抠。如果只有一種css預處理器咙轩，我們通常把處理.css的loader和處理當前這種css預處理器的loader寫在一起。

[chunkhash] 生成hash字符串的方式：每次打包机久，webpack根據(jù)當前chunk進行計算臭墨，如果發(fā)現(xiàn)有代碼變化赔嚎，就生成新的hash名膘盖；如果當前chunk沒有代碼變化，生成的hash名和上一次一樣尤误。

注意2：當同一條規(guī)則需要多個loader協(xié)同完成任務時侠畔，要注意loaders的順序，數(shù)組中后面的loader先工作

注意3：一般我們很少使用style-loader损晤，而應該使用软棺。。尤勋。喘落。把css代碼抽離成樣式的文件。

sass-loader用于加載.scss/.sass文件的最冰，要交給sass編譯器進行編譯瘦棋。（要特別注意node版本、webpack版本和sass-loader版本之間的兼容性）

node v12+ sass-loader v12+ webpack v5

node v12- sass-loader v10- webpack v4

7暖哨、把src中的js代碼編譯成瀏覽器能夠普通兼容的ES5代碼

1赌朋、第一條規(guī)則：當webpack運行時，如果遇到以.js為后綴的文件時，webpack就使用babel-loader來加載.js文件沛慢，然后交給Babel編譯器（@babel/core赡若、@babel/preset-env）進行編譯轉換，最終得到ES5代碼团甲。

2逾冬、babel-loader 專門用于加載javascript文件，然后交給Babel編譯器進行編譯伐庭。

裝了一系列的Babel預設和插件粉渠，添加babel.config.js對各種Babel包進行配置

@babel/core Babel編譯器核心包

@babel/preset-env 用于編譯ES6+代碼

@babel/preset-react 用于編譯jsx代碼

@babel/preset-typesript 用于編譯ts代碼

3、配置預設

就是一些比較大的javascript語法版本圾另。預設不一定能夠編譯所有的小語法

presets: [

? ? ['@babel/preset-env', {}]

? ],

@babel/core 是Babel編譯器的核心代碼霸株，最新版本 v7

@babel/preset-env 是一個Babel預設，用于編譯ES6+語法

@babel/preset-react 是一個Babel預設集乔，用于編譯jsx語法

@babel/preset-typescript 是一個Babel預設去件，用于編譯ts語法

4、配置插件

用于彌補預設不能編譯的小語法問題

plugins: [

? ? ["@babel/plugin-proposal-decorators", { "legacy": true }],

? ? ["@babel/plugin-proposal-class-properties", {}]

? ]

8扰路、在當前環(huán)境中集成ESLint檢測（集成React開發(fā)環(huán)境的代碼檢測）

1尤溜、v4 eslint-loader

exclude 忽略對某種目錄或文件的檢測

enforce:'pre' 這條規(guī)則是一條前置規(guī)則，發(fā)生一般規(guī)則之前汗唱。只有當這條規(guī)則驗證通過了宫莱，后面的一般規(guī)則才會運行。

eslint-loader 專門用于加載javascript文件哩罪，然后交給eslint系列的檢測工具進行檢測授霸。所以，我們還要安裝很多合適的eslint檢測工具际插，并在項目中添加eslint的相關配置文件碘耳。

2、v4 eslint-webpack-plugin 參見.eslintrc.js這個配置框弛。

3辛辨、在v5中，使用eslint-webpack-plugin來配置ESLint瑟枫，語法是CommonJS語法

意義：協(xié)同開發(fā)保證代碼規(guī)范和一致性斗搞。（每個公司的ESlint規(guī)范不一樣）

ESLint只是一個javascript代碼檢測工具，所以根據(jù)不同的項目我們需要安裝不同的ESLint檢測器（代碼規(guī)范的標準）

ESLint的配置文件有六種慷妙，當前這種是優(yōu)先級最高的僻焚。（.eslint.js文件）

4、如何解決ESLint報錯或警告的問題呢景殷？

1溅呢、老老實實地找到報錯或警告的地方澡屡，把它修復好。（開發(fā)環(huán)境不便于寫代碼）

2咐旧、找到這條ESLint規(guī)則的名稱驶鹉，在ESLint配置文件中修改它的檢測級別

3、使用ESlint注釋包裹代碼铣墨，忽略這段代碼的檢測室埋。

// eslint-disable-line

/* eslint-disable */ /* eslint-enable */

/* eslint-disable no-var */ /* eslint-enable no-var */

4、找到webpack配置文件伊约，把eslint規(guī)則注釋掉姚淆。（慎用）

5、在項目的根目錄添加 .eslintigore 這個文件屡律。（選擇性地忽略某些目錄或文件）

經(jīng)驗：如果項目老是頻繁報eslint錯誤腌逢，建議直接在項目根目錄添加一個.eslintigore文件，選擇性忽略某些代碼的檢測超埋。當提交代碼前搏讶，一定要移除.eslintigore文件，重啟項目霍殴，修復所有的eslint問題媒惕。（協(xié)同開發(fā)時，切忌把有eslint問題的代碼提交到遠程）

5来庭、定制React開發(fā)環(huán)境的代碼檢測：

eslint-loader 在webpack v4中集成ESLint

eslint-webpack-plugin 在webpack v5中集成ESlint

eslint 這是ESLint官方提供的基礎檢測工具妒蔚，只要使用ESLint必須安裝它

eslint-plugin-react 這是一個用于檢測React語法的ESlint插件

eslint-plugin-react-hooks 這是一個用于檢測React Hooks語法的ESLint插件

eslint-plugin-jsx-a11y 這是一個用于檢測React JSX元素屬性語法的ESLint插件

eslint-plugin-import 這是一個用于檢測ES6+模塊化語法的ESLint插件

eslint-config-airbnb 由愛彼迎公司開源的一個ESLint套件

@babel/eslint-parser 它是Babel-ESlint的前身，可兼容ESLint的默認解析器月弛，用于對比較新的js語法進行檢測肴盏。

6、改變eslint規(guī)則的檢測級別（三種檢測級別）

off (0) -關閉規(guī)則

warn (1) -違反規(guī)則給警告

error (2) -違反規(guī)則給報錯

9尊搬、在當前環(huán)境下支持jsx語法

安裝 @babel/preset-react 參見babel.config.js這個配置叁鉴。

二土涝、webpack拓展

loader

1佛寿、常用loader有哪些？羅列七八個但壮。

style-loader 將css添加到DOM的內(nèi)聯(lián)樣式標簽style里

css-loader 允許將css文件通過require的方式引入冀泻，并返回css代碼

less-loader 處理less

sass-loader 處理sass

file-loader 分發(fā)文件到output目錄并返回相對路徑

url-loader 和file-loader類似，但是當文件小于設定的limit時可以返回一個Data Url

html-minify-loader 壓縮HTML

babel-loader 用babel來轉換ES6文件到ES5

2蜡饵、自定義loader

每個loader都是一個function函數(shù)弹渔，它接收一種文件(對象或字符串)，最終返回另外一種文件(對象溯祸、字符串或JS代碼)肢专，什么是必須返回JS代碼呢舞肆？如果當前封裝的loader用于webpack規(guī)則中最后的一個loader,那么必須返回js代碼。

自定義loader的基本語法：

module.exports = function(source) {

// 使用任何第三方js模塊do something

const result = 'some string or object'

// return `module.exports = ${JSON.stringify(result)}`

return `export default ${JSON.stringify(result)}` }

如果一個loader不用于webpack規(guī)則的最后一個loader博杖，不要拋出js代碼椿胯。

plugin

1、常用plugins有哪些剃根？羅列七八個哩盲。

Html-Webpack-Plugin 在打包結束后，動生成個 html 文件狈醉，并把打包生成的js 模塊引到該 html 中

clean-webpack-plugin?刪除（清理）構建目錄??

MiniCssExtractPlugin??抽離css文件

ESLintPlugin??代碼檢測工具

2廉油、自定義plugin

每個plugin本質上都是一個class類（這個類必須有一個叫apply實例方法，在這個apply用于向webpack的hooks鉤子上添加一個事件）苗傅。

自定義封裝plugin最重要的是理解什么webpack的hooks鉤子抒线。

舉例：clean-webpack-plugin

優(yōu)化

Wepack開發(fā)環(huán)境優(yōu)化（start）優(yōu)化標準：運行速度盡量快

1、devtool: 'inline-source-map'（負）

2渣慕、watch代碼依賴圖的變化十兢，在v5中hot:true實現(xiàn)熱更新（正）

3、在開發(fā)環(huán)境中開啟memory緩存（生產(chǎn)環(huán)境下默認是關閉的）（正）

4摇庙、在編寫各種loaders規(guī)則或者plugin時旱物，使用exclude、include減少node文件系統(tǒng)的工作卫袒。（正）

5宵呛、巧用resolve對各種路徑進行優(yōu)化，縮小搜索范圍夕凝。（正）

6宝穗、使用thread-loader（注意硬件配置）開啟多線程構建。（正）

7码秉、使用cache-loader對“指定文件模塊”進行緩存逮矛。（正）

8、使用 speed-measure-webpack-plugin 對所有的plugins進行加速转砖。（正）

Webpack生產(chǎn)打包優(yōu)化（build）優(yōu)化標準：代碼質量優(yōu)化

1须鼎、devtool: 'source-map'（正）

2、chunks拆分：

① 在前端代碼中使用“動態(tài)導入()=>import()”自動實現(xiàn)代碼分離（正）（推薦）安裝 @babel/plugin-syntax-dynamic-import 支持動態(tài)導入語法

② 使用optimization.splitChunks 或 split-chunks-plugin手動實現(xiàn)分離分離（正）（很少用）

3府蔗、vendor抽離：在entry入口中對多個chunk中重復的代碼進行抽離（正）

4晋控、bundle分析技術：使用webpack-bundle-analyzer對“代碼依賴圖”進行人工分析

5、使用 tree-shaking 技術把src中的“死代碼”移除掉姓赤，以節(jié)省打包后代碼的體積赡译。具體做法是在package.json中添加"sideEffects":false，該功能只對mode:production起作用不铆。

6蝌焚、抽離CSS并壓縮：

① 使用 mini-css-extract-plugin 把css代碼抽離出來

② 使用 css-minimizer-webpack-plugin 把css代碼進行壓縮

7裹唆、terser壓縮：使用 terser-webpack-plugin 集成terser高性能壓縮