webpack 的核心價值就是前端源碼的打包，即將前端源碼中每一個文件（無論任何類型）都當做一個 pack ，然后分析依賴，將其最終打包出線上運行的代碼。webpack 的四個核心部分
webpack 如今已經進入 v4.x 版本，v5.x 估計也會很快發布。不過看 v5 的變化相比于 v4 ，常用的配置沒有變，這是一個好消息，說明基本穩定。
前端工程師需要了解的 webpack
前端工程化是近幾年前端發展迅速的主要推手之一，webpack 無疑是前端工程化的核心工具。目前前端工程化工具還沒有到一鍵生成，或者重度繼承到某個 IDE 中（雖然有些 cli 工具可以直接創建），還是需要開發人員手動做一些配置。
因此，作為前端開發人員，熟練應用 webpack 的常用配置、常用優化方案是必備的技能 ―― 這也正是本文的內容。另外，webpack 的實現原理算是一個加分項，不要求所有開發人員掌握，本文也沒有涉及。
基礎配置
初始化環境
npm init -y 初始化 npm 環境，然后安裝 webpack npm i webpack webpack-cli -D
新建 src 目錄并在其中新建 index.js ，隨便寫點 console.log('index js') 。然后根目錄創建 webpack.config.js ，內容如下
const path = require('path')module.exports = { // mode 可選 development 或 production ，默認為后者 // production 會默認壓縮代碼并進行其他優化（如 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" },然后運行 npm run build 即可打包文件到 dist 目錄。
區分 dev 和 build
使用 webpack 需要兩個最基本的功能：第一，開發的代碼運行一下看看是否有效；第二，開發完畢了將代碼打包出來。這兩個操作的需求、配置都是完全不一樣的。例如，運行代碼時不需要壓縮以便 debug ，而打包代碼時就需要壓縮以減少文件體積。因此，這里我們還是先把兩者分開，方便接下來各個步驟的講解。
首先，安裝 npm i webpack-merge -D ，然后根目錄新建 build 目錄，其中新建如下三個文件。
// 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 運行代碼的配置（該文件暫時用不到，先創建了，下文會用到）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', // 打包代碼時，加上 hash 戳 path: distPath, // publicPath: 'http://cdn.abc.com' // 修改所有靜態文件 url 的前綴（如 cdn 域名），這里暫時用不到 }})修改 package.json 中的 scripts
"scripts": { "build": "webpack --config build/webpack.prod.js" },重新運行 npm run build 即可看到打包出來的代碼。最后，別忘了將根目錄下的 webpack.config.js 刪除。
這將引發一個新的問題：js 代碼中將如何判斷是什么環境呢？需要借助 webpack.DefinedPlugin 插件來定義全局變量?？梢栽?webpack.dev.js 和 webpack.prod.js 中做如下配置：
// 引入 webpackconst 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 默認支持 js 各種模塊化，如常見的 commonJS 和 ES6 Module 。但是推薦使用 ES6 Module ，因為 production 模式下，ES6 Module 會默認觸發 tree shaking ，而 commonJS 則沒有這個福利。究其原因，ES6 Module 是靜態引用，在編譯時即可確定依賴關系，而 commonJS 是動態引用。
不過使用 ES6 Module 時，ES6 的解構賦值語法這里有一個坑，例如 index.js 中有一行 import {fn, name} from './a.js' ，此時 a.js 中有以下幾種寫法，大家要注意！
// 正確寫法一export function fn() { console.log('fn')}export const name = 'b'// 正確寫法二function fn() { console.log('fn')}const name = 'b'export { fn, name}// 錯誤寫法function fn() { console.log('fn')}export default { fn, name: 'b'}該現象的具體原因可參考http://www.49028c.com/article/162079.htm 。下文馬上要講解啟動本地服務，讀者可以馬上寫一個 demo 自己驗證一下這個現象。
啟動本地服務
上文創建的 webpack.dev.js 一直沒使用，下面就要用起來。
使用 html
啟動本地服務，肯定需要一個 html 頁面作為載體，新建一個 src/index.html 并初始化內容
<!DOCTYPE html><html><head><title>Document</title></head><body> <p>this is index html</p></body></html>
要使用這個 html 文件，還需要安裝 npm i html-webpack-plugin -D ，然后配置 build/webpack.common.js ，因為無論 dev 還是 prod 都需要打包 html 文件。
plugins: [ new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html' }) ]重新運行 npm run build 會發現打包出來了 dist/index.html ，且內部已經自動插入了打包的 js 文件。
webpack-dev-server
有了 html 和 js 文件，就可以啟動服務了。首先安裝 npm i webpack-dev-server -D ，然后打開 build/webpack.dev.js配置。只有運行代碼才需要本地 server ，打包代碼時不需要。
devServer: { port: 3000, progress: true, // 顯示打包的進度條 contentBase: distPath, // 根目錄 open: true, // 自動打開瀏覽器 compress: true // 啟動 gzip 壓縮}打開 package.json 修改 scripts ，增加 "dev": "webpack-dev-server --config build/webpack.dev.js", 。然后運行 npm run dev ，打開瀏覽器訪問 localhost:3000 即可看到效果。
解決跨域
實際開發中，server 端提供的端口地址和前端可能不同，導致 ajax 收到跨域限制。使用 webpack-dev-server 可配置代理，解決跨域問題。如有需要，在 build/webpack.dev.js 中增加如下配置。
devServer: { // 設置代理 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
由于現在瀏覽器還不能保證完全支持 ES6 ，將 ES6 編譯為 ES5 ，需要借助 babel 這個神器。安裝 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/ }, ] },還要根目錄下新建一個 .babelrc json 文件，內容下
{ "presets": ["@babel/preset-env"], "plugins": []}在 src/index.js 中加入一行 ES6 代碼，如箭頭函數 const fn = () => { console.log('this is fn') } 。然后重新運行 npm run dev，可以看到瀏覽器中加載的 js 中，這個函數已經被編譯為 function 形式。
使用高級特性
babel 可以解析 ES6 大部分語法特性，但是無法解析 class 、靜態屬性、塊級作用域，還有很多大于 ES6 版本的語法特性，如裝飾器。因此，想要把日常開發中的 ES6 代碼全部轉換為 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 代碼，然后重新運行 npm run build ，打包出來的代碼會將 class 轉換為 function 形式。
source map
source map 用于反解析壓縮代碼中錯誤的行列信息，dev 時代碼沒有壓縮，用不到 source map ，因此要配置 build/webpack.prod.js
// webpack 中 source map 的可選項，是情況選擇一種：// devtool: 'source-map' // 1. 生成獨立的 source map 文件// devtool: 'eval-source-map' // 2. 同 1 ，但不會產生獨立的文件，集成到打包出來的 js 文件中// devtool: 'cheap-module-source-map' // 3. 生成單獨的 source map 文件，但沒有列信息（因此文件體積較?。ヾevtool: 'cheap-module-eval-source-map' // 4. 同 3 ，但不會產生獨立的文件，集成到打包出來的 js 文件中
生產環境下推薦使用 1 或者 3 ，即生成獨立的 map 文件。修改之后，重新運行 npm run build ，會看到打包出來了 map 文件。
處理樣式
在 webpack 看來，不僅僅是 js ，其他的文件也是一個一個的模塊，通過相應的 loader 進行解析并最終產出。
處理 css
安裝必要插件 npm i style-loader css-loader -D ，然后配置 build/webpack.common.js
module: { rules: [ { /* js loader */ }, { test: //.css$/, loader: ['style-loader', 'css-loader'] // loader 的執行順序是：從后往前 } ] },新建一個 css 文件，然后引入到 src/index.js 中 import './css/index.css' ，重新運行 npm run dev 即可看到效果。
處理 less
less sass 都是常用 css 預處理語言，以 less 為例講解。安裝必要插件 npm i less less-loader -D ，然后配置 build/webpack.common.js
{ test: //.less$/, loader: ['style-loader', 'css-loader', 'less-loader'] // 增加 'less-loader' ，注意順序 }新建一個 less 文件，然后引入到 src/index.js 中 import './css/index.less' ，重新運行 npm run dev 即可看到效果。
自動添加前綴
一些 css3 的語法，例如 transform: rotate(45deg); 為了瀏覽器兼容性需要加一些前綴，如 webkit- ，可以通過 webpack 來自動添加。安裝 npm i postcss-loader autoprefixer -D ，然后配置
{ test: //.css$/, loader: ['style-loader', 'css-loader', 'postcss-loader'] // 增加 'postcss-loader' ， 注意順序 }還要新建一個 postcss.config.js 文件，內容是
module.exports = { plugins: [require('autoprefixer')]}重新運行 npm run dev 即可看到效果，自動增加了必要的前綴。
抽離 css 文件
默認情況下，webpack 會將 css 代碼全部寫入到 html 的 <style> 標簽中，但是打包代碼時需要抽離到單獨的 css 文件中。安裝 npm i mini-css-extract-plugin -D 然后配置 build/webpack.prod.js（打包代碼時才需要，運行時不需要）
// 引入插件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({})], },運行 npm run build 即可看到打包出來的 css 是獨立的文件，并且是被壓縮過的。
處理圖片
要在 js 中 import 圖片，或者在 css 中設置背景圖片。安裝 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 目錄下會生成一個類似 917bb63ba2e14fc4aa4170a8a702d9f8.jpg 的文件，并被引入到打包出來的結果中。
如果想要將小圖片用 base64 格式產出，則安裝 npm i url-loader -D ，然后配置 build/webpack.common.js
{ test: //.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { // 小于 5kb 的圖片用 base64 格式產出 // 否則，依然延用 file-loader 的形式，產出 url 格式 limit: 5 * 1024, // 打包到 img 目錄下 outputPath: '/img/', // 設置圖片的 cdn 地址（也可以統一在外面的 output 中設置，那將作用于所有靜態資源） // publicPath: 'http://cdn.abc.com' } } },多頁應用
src 下有 index.js index.html 和 other.js other.html ，要打包輸出兩個頁面，且分別引用各自的 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），默認全部引用 chunks: ['index'] // 只引用 index.js }), // 生成 other.html new HtmlWebpackPlugin({ template: path.join(srcPath, 'other.html'), filename: 'other.html', chunks: ['other'] // 只引用 other.js }),抽離公共代碼
公共模塊
多個頁面或者入口，如果引用了同一段代碼，如上文的多頁面例子中，index.js 和 other.js 都引用了 import './common.js' ，則 common.js 應該被作為公共模塊打包。webpack v4 開始棄用了 commonChunkPlugin 改用 splitChunks ，可修改 build/webpack.prod.js 中的配置
optimization: { // 分割代碼塊 splitChunks: { // 緩存分組 cacheGroups: { // 公共的模塊 common: { chunks: 'initial', minSize: 0, // 公共模塊的大小限制 minChunks: 2 // 公共模塊最少復用過幾次 } } } },重新運行 npm run build ，即可看到有 common 模塊被單獨打包出來，就是 common.js 的內容。
第三方模塊
同理，如果我們的代碼中引用了 jquery lodash 等，也希望將第三方模塊單獨打包，和自己開發的業務代碼分開。這樣每次重新上線時，第三方模塊的代碼就可以借助瀏覽器緩存，提高用戶訪問網頁的效率。修改配置文件，增加下面的 vendor: {...} 配置。
optimization: { // 分割代碼塊 splitChunks: { // 緩存分組 cacheGroups: { // 第三方模塊 vendor: { priority: 1, // 權限更高，優先抽離，重要?。。? test: /node_modules/, chunks: 'initial', minSize: 0, // 大小限制 minChunks: 1 // 最少復用過幾次 }, // 公共的模塊 common: { chunks: 'initial', minSize: 0, // 公共模塊的大小限制 minChunks: 2 // 公共模塊最少復用過幾次 } } } },重啟 npm run build ，即可看到 vendor 模塊被打包出來，里面是 jquery 或者 lodash 等第三方模塊的內容。
懶加載
webpack 支持使用 import(...) 語法進行資源懶加載。安裝 npm i @babel/plugin-syntax-dynamic-import -D 然后將插件配置到 .babelrc 中。
新建 src/dynamic-data.js 用于測試，內容是 export default { message: 'this is dynamic' } 。然后在 src/index.js 中加入
setTimeout(() => { import('./dynamic-data.js').then(res => { console.log(res.default.message) // 注意這里的 default })}, 1500)重新運行 npm run dev 刷新頁面，可以看到 1.5s 之后打印出 this is dynamic 。而且，dynamic-data.js 也是 1.5s 之后被加載進瀏覽器的 ―― 懶加載，雖然文件名變了。
重新運行 npm run build 也可以看到 dynamic-data.js 的內容被打包一個單獨的文件中。
常見性能優化
tree shaking
使用 import 引入，在 production 環境下，webpack 會自動觸發 tree shaking ，去掉無用代碼。但是使用 require 引入時，則不會觸發 tree shaking。這是因為 require 是動態引入，無法在編譯時判斷哪些功能被使用。而 import 是靜態引入，編譯時即可判斷依賴關系。
noParse
不去解析某些 lib 其內部的依賴，即確定這些 lib 沒有其他依賴，提高解析速度?？膳渲玫?build/wepback.common.js 中
module: { noParse: /jquery|lodash/, // 不解析 jquery 和 lodash 的內部依賴ignorePlugin
以常用的 moment 為例。安裝 npm i moment -d 并且 import moment from 'moment' 之后，monent 默認將所有語言的 js 都加載進來，使得打包文件過大。可以通過 ignorePlugin 插件忽略 locale 下的語言文件，不打包進來。
plugins: [ new webpack.IgnorePlugin(//.//locale/, /moment/), // 忽略 moment 下的 /locale 目錄
這樣，使用時可以手動引入中文包，并設置語言
import moment from 'moment'import 'moment/locale/zh-cn' // 手動引入中文語言包moment.locale('zh-cn')const r = moment().endOf('day').fromNow()console.log(r)happyPack
多進程打包，參考 https://www.npmjs.com/package/happypack 。注意，小項目使用反而會變慢。只有項目較大，打包出現明顯瓶頸時，才考慮使用 happypack 。
常用插件和配置
ProvidePlugin
如要給所有的 js 模塊直接使用 $ ，不用每次都 import $ from 'jquery' ，可做如下配置
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }),externals
如果 jquery 已經在 html 中通過 cdn 引用了，無需再打包，可做如下配置
externals: { jquery: 'jQuery' },alias
設置 alias 別名在實際開發中比較常用，尤其是項目較大，目錄較多時。可做如下配置
resolve: { alias: { Utilities: path.join(srcPath, 'utilities') } },在該配置之前，可能需要 import Utility from '../../utilities/utility' 使用。配置之后就可以 import Utility from 'Utilities/utility' 使用，一來書寫簡潔，二來不用再考慮相對目錄的層級關系。
extensions
如果引用文件時沒有寫后綴名，可以通過 extensions 來匹配。
resolve: { extensions: [".js", ".json"] },clean-webpack-plugin
由于使用了 contentHash ，每次 build 時候都可能打包出不同的文件，因此要及時清理 dist 目錄。安裝 npm i clean-webpack-plugin -D ，然后在 build/webpack.prod.js 中配置
// 引入插件const CleanWebpackPlugin = require('clean-webpack-plugin')// 增加配置 plugins: [ new CleanWebpackPlugin(), // 默認清空 output.path 目錄copy-webpack-plugin
build 時，將 src 目錄下某個文件或者文件夾，無條件的拷貝到 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
代碼的版權聲明，在 build/webpack.prod.js 中配置即可。
plugins: [ new webpack.BannerPlugin('by github.com/wangfupeng1988 /r'),總結
webpack 發展至今配置非常多，該視頻中也沒有全部講解出來，只是一些實際開發中常用的。其他的配置可以去看官網文檔。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
