摘要：隨著承擔(dān)地職責(zé)越來越大，模塊化開發(fā)的需求越來越急迫。我們可以把當(dāng)成是模塊化標(biāo)準(zhǔn)的實現(xiàn)方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個的輸出就是我們最終要的結(jié)果。在文件有值的情況下，是必要的。

由于web應(yīng)用擴展地得極其迅猛，前端技術(shù)也是日新月異，前端的苦不是有多難學(xué)，而是我剛學(xué)完，這東西就被淘汰了（手動哭臉）。框架方面我們有vue、react、angular，我們需要寫vue單文件，也需要寫jsx語法；js方面我們有Typescript、es6(7、8、9)，現(xiàn)在是每年一個小版本的迭代，語法也是在不斷更新和淘汰；模塊方面我們有es6的modlue、CommonJS、AMD；css方面我們有sass、less、postcss。新技術(shù)層出不窮，瀏覽器實現(xiàn)跟不上，還要考慮到瀏覽器兼容性問題，是一個令人頭大的問題。但是webpack可以輕松幫我們解決這些問題，我們可以在webpack的世界中放心地使用上述提到的技術(shù)，以更方便、舒服的方式完成我們開發(fā)。

At its core, webpack is a static module bundler for modern JavaScript applications. 這是官網(wǎng)的定義，webpack就是一個靜態(tài)模塊的打包工具。webpack可以將工程中的靜態(tài)資源根據(jù)我們聲明的依賴關(guān)系，打包出最后的正常運行的輸出文件。官網(wǎng)顯示的這幅圖很形象地描述了這個過程：

在webpack中，所有的靜態(tài)資源都可以被處理為一個模塊，包括js、圖片、css、字體。模塊化是前端開發(fā)的主要模式，模塊化的好處有很多，我想到的有以下3種：

更輕松地拆分代碼邏輯，對于大型工程尤其重要

更容易地去管理變量，模塊會自動生成一個局部變量環(huán)境，減少全局變量的污染

顯示地聲明依賴關(guān)系，想想之前在head中引入很多script標(biāo)簽，由于script順序錯誤而引起的bug

在es6之前，原生js是不支持模塊化開發(fā)。因為js設(shè)計之初，只是為了實現(xiàn)表單驗證等簡單的交互，并沒有考慮到要用js來寫大型的web應(yīng)用。隨著js承擔(dān)地職責(zé)越來越大，模塊化開發(fā)的需求越來越急迫。于是，js社區(qū)誕生出了CommonJS、AMD這樣的js模塊化標(biāo)準(zhǔn)，隨后在es6中，也終于加入了module的原生支持。現(xiàn)在最新版本的各大瀏覽器均已實現(xiàn)了對es6的module語法支持，但也僅限于最新的幾個版本，詳情可以查看一下can i ues。我們可以把webpack當(dāng)成是模塊化標(biāo)準(zhǔn)的實現(xiàn)方案，但webpack的功能不僅限于此。

webpack支持多種模塊使用方式，包括es6的module、CommonJS、AMD。推薦使用es6的module語法，一方面是因為它是標(biāo)準(zhǔn)，是以后模塊化語法的主要使用方式；另一方面，是因為它是靜態(tài)的，webpack可以依靠靜態(tài)分析，做一些優(yōu)化，比如Treeshaking。webpack自帶js模塊處理功能，其他類型的靜態(tài)資源我們需要通過配置相應(yīng)的loader去處理。

webpack中最重要的概念有以下幾個：

Entry, 工程的入口文件配置

Output, 打包的輸出的文件配置

Chunk, webpack處理和輸出的包

Loaders, 加載器，用于處理各種不同類型的模塊，可擴展

Plugins, 插件，在webpack打包過程中不同時機執(zhí)行一些任務(wù)，比如清除打包目錄、復(fù)制靜態(tài)文件、抽取css文件

Mode, 區(qū)分開發(fā)環(huán)境和生成環(huán)境

webpack一般根據(jù)配置文件去執(zhí)行打包任務(wù)，我們創(chuàng)建一個webpack.config.js文件來編寫我們的打包配置。

Entry，顧名思義就是工程的入口文件，Entry的配置寫法有三種：

對象，可配置多入口，可配置chunk名，靈活可擴展，最常用,一個屬性就是一個entry chunk

module.exports = {
  entry: {
    app: "./src/app.js",
    vendors: "./src/vendors.js"
  }
};

字符串, 最簡單直接方式，單入口，chunk名默認(rèn)為main

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

數(shù)組, 多入口，將多個入口文件打包為一個chunk，chunk名默認(rèn)為main

module.exports = {
  entry: ["./path/to/my/entry/file.js", "./path/to/my/entry/file1.js"]
};

入口一般用對象寫法即可，其他兩種寫法的可忽略。

Output用于配置打包輸出的文件，包括輸出文件的文件名、輸出路徑、靜態(tài)資源地址，這里列出最常用的4種：

module.exports = {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js"
  },
  output: {
    filename: "js/[name].js",
    chunkFilename: "js/[name].js",
    path: __dirname + "/dist",
    publicPath: "http://cdn.example.com/assets/[hash]/"
  }
};

配置項如下：

filename: 配置輸出文件名，可添加路徑配置(例子中js/)，可使用占位符，占位符有以下5種：

name: chunk名，在該例子中就是app和search

hash: 模塊標(biāo)識符的hash值，跟工程內(nèi)容相關(guān)

chunkhash: chunk內(nèi)容的hash值，只和當(dāng)前chunk內(nèi)容相關(guān),可用于緩存設(shè)置

id: 模塊標(biāo)識符

query：模塊查詢參數(shù)，取文件名中?后面的內(nèi)容

path: 文件的輸出路徑，必須是絕對地址

publicPath: 用于設(shè)置打包過程中產(chǎn)生的靜態(tài)文件的最終引用地址，靜態(tài)文件的最終引用地址為output.publicPath + output.filename，很多時候，你的靜態(tài)文件放置在CDN上，通過publicPath就可以很方便地設(shè)置。如果你的靜態(tài)引用地址在運行時才能確定，可以在入口文件中設(shè)置__webpack_public_path__ 來決定publicPath的值:

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

chunkFilename: 用于設(shè)置非entry入口的chunk的輸出文件名，非entry入口的chunk一般在動態(tài)引入和CommonsChunkPlugin中產(chǎn)生，這是一個Plugin，用于抽取公共代碼或者進(jìn)行代碼分割等操作，該plugin已經(jīng)在webpack4中廢除，由webpac4內(nèi)置的optimization.splitChunks替代，后面會講到

output還有其他很多配置，這4個是常用配置。

Loaders可以理解為不同類型模塊的處理器，將這些類型的模塊處理為瀏覽器可運行和識別的代碼。比如babel-loader將es6以上代碼轉(zhuǎn)換為es5代碼；sass-loader將sass代碼解析為css代碼；url-loader和file-loader可以將圖片、字體等靜態(tài)文件解析為base64碼或者靜態(tài)文件地址。Loaders給我們提供了處理模塊的入口，在里面可以使用全部的js功能，從而使webpack具有了強大而靈活的能力。webpack及webpack社區(qū)提供了功能強大的loader供開發(fā)者使用，你也可以自己編寫loader。下面介紹一下在工程中常用的loader。

babel-loader

使用babel將ES2015+的代碼轉(zhuǎn)碼為ES5的代碼，babel的具體配置可參考babel官網(wǎng)

modlue: {
    rules: [
        {
             test: /.js$/,
             exclude: /(node_modules|bower_components)/,
             use: "babel-loader
        }
    ]
}

exclude表示不處理的目錄，一般node_modules中的第三方j(luò)s文件不在我們的處理范圍內(nèi)。

script-loader

該loader使對應(yīng)的js文件在全局環(huán)境中運行一次。比如我們在工程中使用了jquery的插件，需要全局暴露$,我們就需要讓jquery文件在全局環(huán)境中運行，以便讓它把$掛載到全局變量中,效果和在瀏覽器中加script標(biāo)簽一樣。

import "jquery";

module: {
    rules: [
        {
        test: /jquery$/,
        use: [ "script-loader" ]
        }
    ]
}

style-loader：將css模塊以style標(biāo)簽的形式加入到html中

css-loader：主要用來解析css中的靜態(tài)資源，將@import和url()解析為import/require()，解析出的除css以外的靜態(tài)資源，一般交給url-loader和file-loader去處理

postcss-loader：可以對css進(jìn)行各種處理，功能強大，比如自動添加css前綴，也可自定義插件

sass-loader/less-loader：將sass/less代碼轉(zhuǎn)換為css

解析一個sass文件，并不只需要一個loader，它需要多個loader串行處理，webpack可以配置多個loader串行處理：

module: {
    rules: [
        {
        test: /.sass$/,
        use: [ "style-loader", "css-loader", "postcss-loader", "sass-loader" ]
        }
    ]
}

我們可以將use配置為一個數(shù)組，loader從右往左依次執(zhí)行，且前一個loader的結(jié)果是下一個loader的輸入。最后一個loader的輸出就是我們最終要的結(jié)果。一個sass文件首先經(jīng)過sass-loader處理，變成css文件，又經(jīng)過postcss-loader處理，添加瀏覽器前綴等功能，接著交給css-loader去解析css文件引用的靜態(tài)變量，最后由style-loader以script標(biāo)簽的形式加入到html中。

url-loader和file-loader是一對用來處理圖片、svg、視頻、字體等靜態(tài)資源文件的loader。一般體積比較小的資源交給url-loader處理，編碼為base64字符串，直接嵌入js文件中。體積較大的文件由file-loader處理，直接釋放為了一個輸出文件。

{
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: "url-loader",
    options: {
        limit: 10000,
        name: "img/[name].[hash:7].[ext]"
    }
},

一般只配置url-loader即可，在資源超過limit的時候，url-loader會將資源自動交給file-loader處理，并將options內(nèi)容也傳遞給file-loader。

loaders用來轉(zhuǎn)換某種特定類型的module，plugins則用來在一些合適的時機執(zhí)行一些特定的任務(wù)，比如代碼分割、靜態(tài)資源處理、環(huán)境變量的注入、將所有css的module抽取為單個文件等。webpack自身也是用插件系統(tǒng)構(gòu)建起來的。插件的目的是做任何loaders做不了的事情。

HtmlWebpackPlugin插件可以用來生成包含你所有打包文件（js和css）的html文件，特別是你在打包文件名配置了hash，就不得不用這個插件了。

module.exports = {
  plugins: [
      new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "src/index.html"),  
          filename: "static/index.[hash].html",  
          inject: true, 
          minify: false, 
          chunks: ["app", "vendor"] 
      })
  ]
};

template: HtmlWebpackPlugin生成html文件的模板，如果簡單的話可以直接通過其他配置項生成，不必多帶帶提供一個html文件模板，詳情可參考HtmlWebpackPlugin

filename: 輸出的html文件名，規(guī)則和output的filename相同

inject: 是否注入打包的文件，包括js和通過MiniCssExtractPlugin打包輸出的css文件，默認(rèn)為true

minify: 是否壓縮

chunks: 只注入某些特定chunk的輸出文件，在多文件場景下比較有用

MiniCssExtractPlugin將一個chunk中的css抽取為一個多帶帶的css文件，如果chunk中不包含css，則不生成文件。且支持按需加載和sourceMap。webpack4新增插件，在webpack4之前是使用ExtractTextWebpackPlugin來做這件事。官方文檔總結(jié)了MiniCssExtractPlugin相對ExtractTextWebpackPlugin的四個優(yōu)勢：

按需異步加載

沒有重復(fù)編譯（性能）

使用更簡單

專門為css設(shè)計

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production"

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          devMode ? "style-loader" : {  // MiniCssExtractPlugin目前還沒有HMR功能，所以最好只在生成環(huán)境使用
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../" // 可多帶帶配置publicPath,默認(rèn)采用output中的publicPath
            }
          },
          "css-loader"
        ]
      }
    ]
  }
}

CopyWebpackPlugin用來處理靜態(tài)文件，可以將文件或者文件夾原封不動地移動到打包目錄。

const CopyWebpackPlugin = require("copy-webpack-plugin")

const config = {
  plugins: [
    new CopyWebpackPlugin([
        { from: "source", to: "dest" },
        { from: "source", to: "dest", toType: "dir|file|template" }, // 手動設(shè)置to的類型，比如設(shè)置成dir，即使to設(shè)置為a.js,最后也會生成a.js文件夾
        { from: "source", to: "dest", context: "/app" }, // 基準(zhǔn)目錄，from相對于context解析
        { from: "source", to: "dest", ignore: ["*.js"] }, // ignore, 忽略匹配的文件
        "source" // 只有from，to默認(rèn)為output的path
     ], {
         context: "/app", // 同上
         ignore: ["*.js"], // 同上
     })
  ]
}

CleanWebpackPlugin用來清除打包目錄，主要用于每次重新生成的時候，清除殘留文件。在文件有hash值的情況下，是必要的。

const CleanWebpackPlugin = require("clean-webpack-plugin");
const config = {
  plugins: [
    new CleanWebpackPlugin(["dist", "bulid/*.js"], {
        watch: false, // 是否在--watch模式下也清除files然后重新編譯，默認(rèn)為false
        exclude: [ "files", "svg", "css" ] // 不刪除的子目錄和文件
    }),
  ]
}

DefinePlugin用來定義webpack編譯期間的全局變量。我們可以根據(jù)這些變量，來做不同的動作。最典型的就是可以區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，比如在開發(fā)環(huán)境打印各種警告、錯誤，在生產(chǎn)環(huán)境去掉這些跟業(yè)務(wù)無關(guān)的代碼。

DefinePlugin的參數(shù)是一個對象，鍵名是一個標(biāo)識符，或者用.隔開的多級標(biāo)識符，參數(shù)遵循以下規(guī)則

如果參數(shù)值是一個字符串，則被當(dāng)做代碼塊

如果參數(shù)值不是字符串，則會自動轉(zhuǎn)換為字符串

如果參數(shù)值是一個對象，則對象的每個值都按照上述規(guī)則被定義為全局變量

如果鍵名前面有typeof，則只是定義typeof的調(diào)用

new webpack.DefinePlugin({
 "process.env.NODE_ENV": JSON.stringify("production"),
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
});

index.js

console.log("PRODUCTION", PRODUCTION);
console.log("VERSION", VERSION);
console.log("BROWSER_SUPPORTS_HTML5", BROWSER_SUPPORTS_HTML5);
console.log("TWO", TWO);
console.log("Object", typeof window);

被編譯為

console.log("PRODUCTION", true);
console.log("VERSION", "5fa3b9");
console.log("BROWSER_SUPPORTS_HTML5", true);
console.log("TWO", 1+1);
console.log("Object",  false ? undefined : _typeof(window));    // 不太明白

DefinePlugin的原理很簡單，只是在編譯過程中遇到這些定義好的鍵名，就用鍵值做簡單的文本替換。所以，你如果想給全局變量賦一個字符串，需要這樣寫""production"",一般使用JSON.stringify來轉(zhuǎn)一下。

webpack4新增了mode配置。webpack會根據(jù)mode值自動幫你做一個不同的優(yōu)化:

production（默認(rèn)值）

在DefinePlugin 中將process.env.NODE_ENV設(shè)置為production

默認(rèn)啟用了如下插件：FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin

development:

在DefinePlugin 中將process.env.NODE_ENV設(shè)置為development

默認(rèn)啟用了如下插件：NamedChunksPlugin , NamedModulesPlugin

none: 什么都不做

mode的兩種使用方式

配置：

module.exports = {
  mode: "production"
};

命令行：

webpack --mode=production

代碼分割可以把代碼按照一定的邏輯分割，用來做按需加載或者并行加載，以減少加載時間。在webpack中，主要有以下3中方式，實現(xiàn)代碼分割：

Entry Points: 手動在entry入口配置處配置多個入口

SplitChunks: webpack4默認(rèn)帶這個優(yōu)化插件，用于抽取不同chunk的公共部分，或者直接代碼分割

Dynamic Imports: 動態(tài)加載，在函數(shù)中使用import()語法，webpack使用SplitChunks將import()加載的module分割為一個多帶帶的chunk，并在函數(shù)執(zhí)行時加載該chunk對應(yīng)的js文件。

第一種沒什么好說的，主要說一下后兩種。

在webpack4之前的版本，都是使用CommonsChunkPlugin來抽取公共chunk，在webpack4中廢棄了CommonsChunkPlugin，轉(zhuǎn)而支持內(nèi)置的optimization.splitChunks。

splitChunks默認(rèn)只對按需加載的chunk起作用，會自動將import()引入的module分割為多帶帶chunk，但是需要滿足以下條件：

新chunk中的模塊被共享或者來自node_modules

新chunk必須大于30kb(before min+gz)

按需加載的chunks并行加載的數(shù)量要小于等于5

入口文件的并行加載的請求應(yīng)該小于等于3

在執(zhí)行后兩個原則的時候，體積大的chunk被優(yōu)先生成。

splitChunks的默認(rèn)配置如下,我們可以看出正好是和上面4個條件對應(yīng)的：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000, // chunk只有超過這個大小才會被分割
      maxSize: 0, // 大于這個體積的chunk會被自動分割為更小的chunk
      minChunks: 1, // 一個模塊被共享的chunk數(shù)量大于minChunks時，才會被分割出來
      maxAsyncRequests: 5, // 按需加載最大的并行數(shù)
      maxInitialRequests: 3, // 初始加載最大的并行數(shù)
      automaticNameDelimiter: "~", // name為true時，新chunk的文件名由cacheGroups的key加上chunks屬性的一些信息生成，automaticNameDelimiter是分隔符
      name: true,
      cacheGroups: {  // 配置拆分規(guī)則，會繼承splitChunks所有的配置項，所有splitChunks配置項都可以在這里重寫覆蓋，test、prioprity、reuseExistingChunk是cacheGroups獨有的屬性
        vendors: {
          test: /[/]node_modules[/]/, // 模塊匹配規(guī)則，可以是正則表達(dá)式或者函數(shù)，不寫默認(rèn)選擇所有模塊
          priority: -10 // 優(yōu)先級，當(dāng)同一個模塊同時包含在不同cacheGroup中，該模塊將被劃分到優(yōu)先級高的組中
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true  // 如果該chunk包含的modules都已經(jīng)另一個被分割的chunk中存在，那么直接引用已存在的chunk，不會再重新產(chǎn)生一個
        }
      }
    }
  }
};

splitChunks的chunks屬性表示作用的chunk范圍。chunks可以是一個函數(shù)，完全由開發(fā)者控制；也可以是一個字符串，字符串一共有3個值：

initial,表示只作用于入口chunk

async，表示只作用于動態(tài)引入的異步chunk

all，所有chunk

name屬性表示最后生成chunk的文件名，有以下3中類型取值：

boolean，設(shè)置為true，則會根據(jù)cacheGroup的key和chunks屬性的信息自動生成

string，如果設(shè)置在splitChunks下，那所有chunk設(shè)置為相同的名稱，這會造成不同的chunk合成為一個chunk,當(dāng)然你可以設(shè)置在cacheGroup下

function，完全由開發(fā)者控制

Tree Shaking這次詞很形象，搖樹，把爛掉的樹葉搖下來。我們工程中的爛樹葉就是那些我們導(dǎo)出了，但是沒有用到的代碼，Tree Shaking可以幫助我們?nèi)コ裏o效代碼，減小打包體積，有其在大工程中，效果明顯。

Tree Shaking的使用三部曲：

使用Tree Shaking的第一個前提條件就是必須使用ES2015的模塊語法，import,export。因為ES2015的模塊語法是靜態(tài)加載的，而CommonJS和AMD都是動態(tài)加載。靜態(tài)加載是指在編譯階段你就能確定導(dǎo)出和加載的內(nèi)容。ES2015在語法上規(guī)定：你只能在頂層模塊作用域進(jìn)行導(dǎo)入導(dǎo)出操作，不允許在條件語句中導(dǎo)入導(dǎo)出，也不允許導(dǎo)入和導(dǎo)出的內(nèi)容有變量。這意味著你只分析源碼就可以確定導(dǎo)入和導(dǎo)出的內(nèi)容，而不是等到運行時才能確定。比如說下面CommonJS的語法，在ES6中就是不能使用的：

var my_lib;
if (Math.random()) {
    my_lib = require("foo");
} else {
    my_lib = require("bar");
}

你只有在運行的時候，才知道到底加載是的foo還是bar。ES6強制模塊語法靜態(tài)化，失去了一定的靈活性，但是帶來了更多的好處，其中之一就是我們可以通過靜態(tài)分析去實現(xiàn)Tree Shaking。

在完全的Es6模塊世界中，代碼是沒有副作用的，但是現(xiàn)在我們可能用到的各種地方庫會有副作用。副作用是指代碼除了導(dǎo)入和導(dǎo)出，還做了一些其他影響了其他代碼的行為，比如定義了全局變量。最典型的例子就是polyfills,比如Promise的polyfills就定義了Promise全局變量。這時候如果我們分析到Promise有未使用的導(dǎo)出代碼，則不能刪除，否則可能會影響Promise的使用。哪些是有副作用的代碼，需要你識別，并且告訴webpack，方式就是通過設(shè)置sideEffects,可以設(shè)置在package.json文件中，也可以設(shè)置的module.rules中。

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}

webpack會通過靜態(tài)分析找到冗余代碼，并打上標(biāo)記，我們看一下官網(wǎng)例子：

math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

index.js

 import { cube } from "./math.js";

  function component() {
   var element = document.createElement("pre");

   element.innerHTML = [
     "Hello webpack!",
     "5 cubed is equal to " + cube(5)
   ].join("

");

    return element;
  }

  document.body.appendChild(component());

在development模式下打包，內(nèi)容如下：

/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__["a"] = cube;
  function square(x) {
    return x * x;
  }

  function cube(x) {
    return x * x * x;
  }
});

我們可以看到代碼中并未用到math.js中的square方法，webpack輸出文件中表示它未被使用。如果想去掉未被使用的代碼，則需要用到UglifyJSPlugin插件，它是用來壓縮js文件的，自動啟用了去除冗余代碼的功能。我們可以在production模式下打包，會發(fā)現(xiàn)square的代碼已經(jīng)被去除。