webpack基本用法及原理（10000+）

木子草明發表於2021-09-30

1 webpack是什麼

所有工具的出現，都是為了解決特定的問題，那麼前端熟悉的webpack是為了解決什麼問題呢？

1.1 為什麼會出現webpack

js模組化：
瀏覽器認識的語言是HTML，CSS，Javascript，而其中css和javascript是通過html的標籤link,script引入進來。

隨著前端專案的越來越複雜，css和js檔案會越來越龐大，那麼在開發階段，就必須要把css和js按功能拆分成幾個小檔案，方便開發。

那麼拆分的小檔案如何引入到html中呢？css可以通過link標籤或者@importcss語法，但是js因為沒有模組匯入的語法（ES6有了import，但還不是所有瀏覽器相容），就只能通過script標籤引入。但是這樣的話會導致很多問題：

http請求大量增多，影響頁面呈現速度。
全域性變數混亂，難以維護。

針對js模組化出現了很多的解決方案，總結來說有幾種規範：

CommonJs，語法為：require(), module.exports（同步載入，適用於node伺服器環境）
ES6 Mode,語法為：import,export（非同步載入，適用於瀏覽器環境)
AMD,語法為：require(),define()（非同步載入，適用於瀏覽器環境）

工程化：
除了js模組化的問題之外，前端還有很多其他的問題，比如程式碼混淆，程式碼壓縮，scss，less等css預編譯語言的編譯，typescript的編譯，eslint檢驗程式碼規範，如果這些任務都需要手工去執行的話，太繁瑣，也容易出錯。

1.2 webpack能做什麼

模組化
其實webpack的核心就是解決js模組化問題的工具，執行在node環境中，同時可以支援commonjs，es6，amd的模組語法（可以使用：reuire/mocule.exports,import/export,require/define的方式來匯入匯出模組）。

可以將開發時候拆分為不同檔案的js程式碼，打包成一個js檔案。也可以通過配置靈活的拆分js程式碼，通過 tree shaking 刪減沒有使用到的程式碼。

模組化打包時webpack的核心功能，但是它還有兩個非常重要的機制loader和plugin。
loader
webpack本身只支援js,json檔案的模組化打包，但是有開放出loader介面，通過不同的loader可以將其他格式的檔案轉化為可識別的模組，比如：
css-loader可以識別css檔案，raw-loader可以直接將檔案當作模組，less-loader，sass-loader可以直接識別less，sass檔案。
plugin
外掛機制是webpack的另一個重要的擴充，webpack在打包的過程中，會暴露出不同的生命週期事件，而外掛會監聽這些事件，然後做出對應的操作，比如：
UglifyJsPlugin可以混淆壓縮程式碼，EslintWebpackPlugin可以執行eslint的程式碼格式檢測和自動修復。

總結：
webpack是一個執行在node環境下，對js檔案進行模組化打包的工具。通過loader機制可以實現除js格式外的其他格式檔案，通過plugin機制可以實現自動執行一些工程化需要的任務。

2 webpack怎麼用

那麼webpack要怎麼使用呢？

2.1 安裝執行

首先要安裝webapck，使用npm（npm基本用法及原理），安裝webpack（核心），webpack-cli（命令列工具）:

npm install webpack webpack-cli

然後建立以下兩個檔案：name.js，index.js，
我們以es6的語法匯入匯出模組，es6模式的模組變數的匯出時按引用匯出，就是在模組的變數如果在外部被修改，也會作用到模組內部，而commonjs的模式是按值匯出，即模組外部的修改，不會影響到模組內部。

//name.js
let name = "小明"
function say(){
    console.log('my name is ',name)
}
export  {
    name,
    say
}

//index.js
import { name,say } from "./name.js";

name = "小紅"
say()
console.log('he name is ',name)

然後執行打包命令：

//用npx直接執行webpack命令
npx webpack 

//或者用npm的指令碼執行打包
//package.json
{
	script:{
		pack:'webpack'
	}
}
npm run pack

webpack預設從index.js檔案開始打包，所以如果開始檔案的名稱為index，就可以不需要寫配置檔案，就可以直接打包。
預設打包的模式是‘production'即生產模式，打包成功後，會自動建立dist資料夾，並生成main.js檔案：

//main.js
(()=>{"use strict";let e="小明";e="小紅",console.log("my name is ","小紅"),console.log("he name is ","小紅")})();

我們看到打包後的檔案把index.js和name.js兩個檔案合成了一個檔案，並對程式碼進行了混淆壓縮（生產模式），這是最基本的webpack最核心的功能 6— 打包。
但是顯然，在實際工作中我們不會這麼簡單的使用，那就需要用的配置檔案了，下面是一個比較接近實際工作中的例子。

2.2 配置檔案 webpack-config.js

以下的專案會有幾個檔案：index.js , utils.js, style.scss, index.html, webpack-config.js。
基本功能就是在index.js檔案中引入utils.js檔案裡的方法並呼叫。然後用scss語法編寫樣式，最後把打包的檔案加入到已有的index.html檔案中。
通過命令：npx webpack serve(可以放入npm指令碼配置中，然後執行 npm run xxx)，實現的效果是：

scss自動編譯
index.js utils.js style.scss 檔案打包成一個檔案
把打包的檔案自動新增到index.html中
打包完成後，自動開啟預設瀏覽器，檢視頁面
檔案有變更的話，會自動重新打包，重新整理頁面

//utils.js
export function sayHello(){
    console.log('hello world')
}

//index.js
import './styles.scss'
import { sayHello } from "./utils";
sayHello()

/*styles.scss*/
$bg : black;
$fontC:rgb(218, 17, 117);
body{
    background:$bg; 
    h3{
        color:$fontC;
    }
}

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
      <h3>hello webpack</h3>
  </body>
</html>

//webpack-config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist資料夾
  },

  // 本地伺服器
  devServer:{
    port:8888,//埠
    open:true,//自動開啟瀏覽器
    hot:true,//啟動熱更新
  },

  // loader
  module:{
    // 處理scss檔案
    rules:[
      {
        test:/\.s[ac]ss$/i,
        use:[
          'style-loader',//將js模組生成style標籤節點
          'css-loader',//將css轉化成js模組
          'sass-loader'//將scss檔案編譯成css檔案
        ]
      }
    ]
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
};

webpack的打包是在node環境下執行的，所以node的語法這裡都可以用，最終輸出的是一個js物件。
配置可以分成幾個部分（參考webpack配置文件）：

打包模式
- mode 預置了開發環境和生產環境的一些優化。
- devtool 控制是否生成，以及如何生成 source map。有了source map檔案的話，如果程式碼有報錯可以對映到打包之前的程式碼（原始碼），可以方便定位錯誤。
  可以有很多的選擇，一般來說，在開發環境下選擇：eval-cheap-module-source-map，cheap-source-map。生產環境選擇：不配置，source-map。
入口、出口
- entry 入口檔案，webpack會從這個檔案開始查詢依賴的包，可以配置多個
- output 出口檔案，webpack會根據這裡的配置，輸出打包後的檔案。
本地伺服器
此功能需要安裝webpack-dev-server外掛npm install --save-dev webpack-dev-server,啟動時需要用serve命令npx webpack serve.
啟動成功後，會在本地開啟一個web伺服器，並且有實時更新，熱模組替換等功能。
配置項是在devServer中。
loader
webpack本是隻支援對js檔案的打包，但是因為有loader機制，可以通過配置rules實現對其他檔案的打包。
示例程式碼中實現的是對scss/sass檔案的打包，同一個relues中的loader的執行順序是從右到左（逆序），所以順序不能亂。第一個執行的loader 會將其結果（被轉換後的資源）傳遞給下一個要執行的loader。
外掛plugins
webpack在打包的時候，會暴露其生命週期，外掛就是在特定的生命週期執行的操作，通過外掛的機制，可以實現很多強大的功能。
示例程式碼中使用了HtmlWebpackPlugin外掛，功能是在打包完成後，自動把打包後的程式碼加入到html檔案中。如果沒有任何配置，則會自動生成一個html檔案，並通過<script>標籤把js檔案引入進來。

3 實踐中的優化

3.1 配置檔案拆分與合併--merge

在實際專案中，開發環境和生產環境的配置往往會有很大的區別，所以會有兩個配置檔案，而這兩個配置檔案又會有一些公共的配置，所以就會有如下三個配置檔案：

webpack.dev.js
webpack.prod.js
webpack.common.js
那麼這些配置檔案是如何結合的呢?這就要用到webpack-merge外掛了。

// webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist資料夾
  },
  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
};

//webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  // 本地伺服器
  devServer:{
    port:8888,//埠
    open:true,//自動開啟瀏覽器
    hot:true,//啟動熱更新
  },
});

//webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool:'source-map'
});

// package.json
{
	...
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
  },
	...
}

然後分別執行npm run dev,npm run build就可以了。

3.2 程式碼分離

webpack會把所有程式碼打包成一個檔案（包括業務程式碼，npm包），這樣最後的包就會很大，打包效率也很慢，所以可以有時候需要做程式碼分離。

第三方庫分離
有一些第三方庫可能會需要獨立引入，而不是放在業務程式碼裡面，因為不會改動或者需要cdn服務，比如jquery有免費的cdn服務：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js 。
那這些獨立引入的js檔案就不需要加入到webpack打包，只需要在externals新增配置就行。

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',//contenthash 是檔案內容的hash值
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist資料夾
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
};

這樣的話，雖然index.js裡有引入jquery，webpack也不會把jquery打包進來，打包時間會減少，包的體積也會變小。

npm包分離
第三方庫除了一些可以用script標籤引入的，大多數是通過npm引入的，這一類的js包也會也會合併到最後的app.js總包之中，使得app.js檔案會過大，而且如果業務程式碼有一點改動的話，app.js的包就會全部都變動，導致瀏覽器就會重新下載app.js檔案，使用不了瀏覽器內建的快取機制。
我們可以通過配置，讓npm裡的包與業務程式碼分開。

// index.js

import _ from 'lodash'
import $ from 'jquery'
import { sayHello } from "./utils"

$('#title').text('hello jquery')

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js', //contenthash是檔案內容的hash值
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist資料夾
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
  optimization: {
    runtimeChunk: 'single',// 把webpack引導檔案獨立出來
    splitChunks: {
      cacheGroups: {
        vendor: {
        //所有node_modules下的包合併成一個，並獨立出來
          test: /[\\/]node_modules[\\/]/, 
          //控制哪種匯入方式的js包才分離出來， 'all'-全部的js包,'async'-非同步匯入的js包,'initial'-初始匯入的js包
          chunks: 'all',
          name:'vendor' //獨立後的包的名稱
        }
      }
    }
  },
};

這樣打包目錄下就有三個檔案：

app.js：業務程式碼
runtime.js：webpack的引導程式碼
vendor.js: npm引入的js包程式碼

一般有變動的就只有app.js檔案了。npm引入的js包是否可以再分成幾個檔案呢？可以的，參看 SplitChunksPlugin文件

業務程式碼分離
有時候不僅第三方庫需要分離，我們自己寫的業務程式碼可能也會很大，也需要分離。要實現業務程式碼的分離只要新增多個入口就可以了。

// index.js
import { sayHello } from "./utils"

sayHello()
console.log('hello index')

// utils.js
export function sayHello(){
    console.log('hello utils')
}

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode: 'development',
 devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
      dependOn:'utils'
    },
    utils:'./src/utils.js'
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist資料夾
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
};

這樣utils.js檔案也從主包app.js中分離了出來，要注意的是app入口加了dependOn:'utils',為了讓app.js裡面不要重複打包utils.js。

動態載入
有時候不是需要頁面一開始的時候，就載入全部的js包，而是等到特定的時機再去載入某些js包，這就需要動態載入了，只需要用到import()就可以了，注意這是import的函式使用方式。

// index.js

  const element = document.createElement('div');
  element.id = 'title'
  element.innerHTML ='Hello webpack';

  const button = document.createElement('button');
  button.innerHTML = 'Click me';
  button.onclick = importJquery;


  document.body.appendChild( element);
  document.body.appendChild( button);

  async function importJquery(){
	    const { default: $ } = await import('jquery');
	    $('#title').text('hello jquery')
	}

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode: 'development',
 devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
    },
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist資料夾
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
  ],
};

如果執行程式碼的話，會發現頁面一開始進入的時候，並沒有引入jquery的包，但是點選按鈕的時候，就開始匯入了，這就動態載入。
並且發現webpack.config.js並沒有做什麼特殊的配置，這是因為動態匯入的js包webpack會自動給獨立為一個js檔案。
import()返回的是一個promise物件。

3.3 動態連結庫 dll

webpack每次打包的時候，都會把涉及到的js包都處理一遍。但是實際上有些js包是不會有改動到的，所以打包過後的檔案每次都是一樣的，每次都重新打包的話，會加增打包時間。
有一種解決方案是：把不會變動的js包先打包一次，以後每次打包的時候，直接引用就可以了。
先新增一個獨立的配置檔案 webpack.dll.config.js

//webpack.dll.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  // 入口檔案
  entry: {
    // 專案中用到該兩個依賴庫檔案
    jquery_lodash: ['jquery','lodash'],
  },
  // 輸出檔案
  output: {
    // 檔名稱
    filename: '[name].dll.js', 
    // 將輸出的檔案放到dll目錄下
    path: path.resolve(__dirname, 'dll'),
	
	// 檔案輸出的全域性變數
    library: '_dll_[name]',
  },
  plugins: [
    // 使用外掛 DllPlugin
    new webpack.DllPlugin({
        // 動態連結庫的全域性變數名稱，需要和 output.library 中保持一致
        // 該欄位的值也就是輸出的 manifest.json 檔案 中 name 欄位的值
        name: '_dll_[name]',
        // 描述動態連結庫的 manifest.json 檔案輸出時的檔名稱
        path: path.join(__dirname, 'dll', '[name].manifest.json')
      }),
  ]
};

執行打包指令碼 npx webpack --config webpack.dll.config.js,就會再dll目錄下輸出檔案：jquery_lodash.dll.js,jquery_lodash.manifest.json。
主要用到的外掛是：

DllPlugin 的作用就是生成manifest.json檔案。

然後配置專案打包用的webpack.config.js檔案：

//webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');


module.exports = {
  mode: 'development',
  devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
    },
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist資料夾
  },

  // 外掛
  plugins: [
    // 自動把打包後的檔案加入到html檔案
    new HtmlWebpackPlugin({
      // 生成html檔案的模板
      template: './index.html'
    }),
    // 引用dll中的檔案,
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dll/jquery_lodash_dll.manifest.json')
    }),
    //把dll檔案加入到index.html中
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, './dll/jquery_lodash_dll.dll.js'),
      publicPath: './',
    }),
  ],
};

主要用到的外掛是:

DllReferencePlugin 檢索引用檔案的時候，如果發現manifest.json裡面有，就告訴webpack不要打包該檔案，因為已經打包好了。
AddAssetHtmlWebpackPlugin 因為webpack沒有打包dll裡的檔案，所以需要手動把它加入到index.html中。

然後就可以正常的打包專案了：

// index.js
 import _ from 'lodash'
 import $ from 'jquery'

$('#title').text('hello jquery')

執行打包指令碼 npx webpack，會自動使用webpack.config.js配置檔案打包。會發現打包速度提高了很多。

npm基本用法及原理(10000+)
2021-06-08
NPM
webpack的基本用法
2018-09-03
Web
STL vector的內部實現原理及基本用法
2016-12-23
vim配置及基本用法
2024-04-02
ThreadLocal用法及原理
2019-03-22
thread
Webpack 下使用 web workers 及基本原理和應用場景
2019-07-27
Web
Promise含義及基本用法
2019-11-22
Promise
MongoDB 及 PyMongo 的基本用法
2019-03-27
MongoDB
Intellij安裝及基本用法
2019-01-30
IntelliJ
Laravel Query Builder 原理及用法
2017-10-01
LaravelUI
Spark的基本結構及SparkSQL元件的基本用法
2018-04-27
SparkSQL元件
Elaticsearch(一)--基礎原理及用法
2021-12-08
SDWebImage的基本用法及常見問題
2017-07-24
Web
xargs的原理剖析及用法詳解
2017-08-04
webpack 基本操作
2019-03-29
Web
webpack原理
2019-05-06
Web
webpack用法小結
2018-04-07
Web
基本功 | Litho的使用及原理剖析
2019-03-15
常用輪子之EventBus基本使用及原理
2019-01-20
常用輪子之Retrofit基本使用及原理
2018-12-05
常用輪子之Okhttp基本使用及原理
2018-12-02
HTTP
RPC基本原理及實現
2019-01-27
RPC
爬蟲基本原理及urllib庫的基本使用
2019-03-21
爬蟲
Promise基本用法
2019-11-26
Promise
Git基本用法
2018-11-19
Git
mongoose基本用法
2017-12-14
Go
tcpdump基本用法
2013-04-03
TCP
GORM基本用法
2024-10-17
GoORM
webpack系列--淺析webpack的原理
2019-06-14
Web
深入淺出webpack -- loader和plugin原理及區別
2020-10-12
WebPlugin
Docker入門教程：15個Docker基本命令及用法
2015-01-02
Docker
vxlan基本原理及裸搭過程
2024-06-21
webpack核心模組tapable用法解析
2021-03-15
Web
extract-text-webpack-plugin用法
2019-02-13
WebPlugin
Webpack 原理淺析
2020-07-29
Web
Webpack 模組打包原理
2019-03-22
Web
webpack原理解析
2019-03-04
Web
webpack 熱更新原理
2024-08-19
Web