摘要：配置以何種方式導(dǎo)出庫。當(dāng)檢測文件不再發(fā)生變化，會(huì)先緩存起來，等等待一段時(shí)間后之后再通知監(jiān)聽者，這個(gè)等待時(shí)間通過配置。發(fā)布到線上給用戶使用的運(yùn)行環(huán)境。

限制編譯范圍

module: {
        rules: [
            {
                test: /.js$/,
                use: ["babel-loader?cacheDirectory"],
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/
            }
        ]
    }

"babel-loader?cacheDirectory"

You can also speed up babel-loader by as much as 2x by using the cacheDirectory option. This will cache transformations to the filesystem.

命令行warning

[BABEL] Note: The code generator has deoptimised the styling of "/Users/xxx/Documents/xxx/webpack_test/test3/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".

加上exclude限制范圍就不會(huì)報(bào)錯(cuò)了

Tell webpack what directories should be searched when resolving modules.

resolve: {
    modules: [path.resolve("node_modules"), path.resolve("lib")]
}

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as it"s ancestors (i.e. ./node_modules, ../node_modules, and on).

With an absolute path, it will only search in the given directory.

If you want to add a directory to search in that takes precedence over node_modules/:(即是有先后順序的)

modules: [path.resolve(__dirname, "src"), "node_modules"]

Module not found: Error: Can"t resolve "ajax" in "/Users/xxx/Documents/xxx/webpack_test/test3/src"

當(dāng)你需要指定除node_modules之外的其它模塊目錄的時(shí)候可以在數(shù)組中添加屬性

Webpack 配置中的 resolve.mainFields 用于配置第三方模塊使用哪個(gè)入口文件。

安裝的第三方模塊中都會(huì)有一個(gè) package.json文件,用于描述這個(gè)模塊的屬性，其中有些字段用于描述入口文件在哪里，resolve.mainFields 用于配置采用哪個(gè)字段作為入口文件的描述。

可以存在多個(gè)字段描述入口文件的原因是因?yàn)橛行┠K可以同時(shí)用在多個(gè)環(huán)境中，針對(duì)不同的運(yùn)行環(huán)境需要使用不同的代碼。 以 isomorphic-fetch API 為例，它是 Promise的一個(gè)實(shí)現(xiàn)，但可同時(shí)用于瀏覽器和 Node.js 環(huán)境。

為了減少搜索步驟，在你明確第三方模塊的入口文件描述字段時(shí)，你可以把它設(shè)置的盡量少。 由于大多數(shù)第三方模塊都采用 main字段去描述入口文件的位置，可以這樣配置 Webpack：

module.exports = {
  resolve: {
    // 只采用 main 字段作為入口文件描述字段，以減少搜索步驟
    mainFields: ["main"],
  },
};

配置項(xiàng)通過別名來把原導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑

此優(yōu)化方法會(huì)影響使用Tree-Shaking去除無效代碼

alias: {
    "bootstrap": "bootstrap/dist/css/bootstrap.css"
}

在導(dǎo)入語句沒帶文件后綴時(shí)，Webpack會(huì)自動(dòng)帶上后綴后去嘗試詢問文件是否存在 -

默認(rèn)后綴是 extensions: [".js", ".json"]

后綴列表盡可能小

頻率最高的往前方

導(dǎo)出語句里盡可能帶上后綴

module.noParse 配置項(xiàng)可以讓 Webpack 忽略對(duì)部分沒采用模塊化的文件的遞歸解析處理

module: {
    noParse: [/react.min.js/]
}

被忽略掉的文件里不應(yīng)該包含 import 、 require 、 define 等模塊化語句

dll 為后綴的文件稱為動(dòng)態(tài)鏈接庫，在一個(gè)動(dòng)態(tài)鏈接庫中可以包含給其他模塊調(diào)用的函數(shù)和數(shù)據(jù)

把基礎(chǔ)模塊獨(dú)立出來打包到多帶帶的動(dòng)態(tài)連接庫里

當(dāng)需要導(dǎo)入的模塊在動(dòng)態(tài)連接庫里的時(shí)候，模塊不能再次被打包，而是去動(dòng)態(tài)連接庫里獲取

定義插件(DLLPlugin) ---> 引用插件(DllReferencePlugin)

本次例子用jquery舉例

用于打包出一個(gè)個(gè)動(dòng)態(tài)連接庫

需要多帶帶build

webpack.jquery.config.js

module.exports = {
    entry: ["jquery"],
    output: {
        filename: "vendor.js",
        path: path.resolve(__dirname, "dist"),
        libraryTarget: "var",// 打包的方式，hou
        library: "vendor_lib_vendor"http:// DLL的名字
    },
    plugins: [
        new webpack.DllPlugin({
            name: "vendor_lib_vendor",// 定義DLL
            path: path.resolve(__dirname, "dist/vendor-manifest.json")
        })
    ]
};

package.json 的scripts添加

"dll": "webpack --config webpack.jquery.config.js --mode development"

配置好上述的文件后，在終端運(yùn)行 npm run dll,時(shí)候會(huì)在dist目錄下生成兩個(gè)文件，分別是vendor.js 和 vendor-manifest.json。vendor.js包含的就是打包后的jquery文件代碼，vendor-manifest.json是用來做關(guān)聯(lián)的。DLL定義好了，接下來就是應(yīng)用打包好的DLL了。

webpack.config.js 配置文件中引入DllPlugin插件打包好的動(dòng)態(tài)連接庫

plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./dist/vendor-manifest.json")
        })
    ],

app.html
在app.html的底部添加

libraryTarget 和 library

當(dāng)用 Webpack 去構(gòu)建一個(gè)可以被其他模塊導(dǎo)入使用的庫時(shí)需要用到它們。

output.libraryTarget 配置以何種方式導(dǎo)出庫。

output.library 配置導(dǎo)出庫的名稱。 它們通常搭配在一起使用。

output.libraryTarget 是字符串的枚舉類型，支持以下配置。

編寫的庫將通過 var 被賦值給通過 library 指定名稱的變量。

假如配置了 output.library="LibraryName"，則輸出和使用的代碼如下：

// Webpack 輸出的代碼
var LibraryName = lib_code; //其中 lib_code 代指導(dǎo)出庫的代碼內(nèi)容，是有返回值的一個(gè)自執(zhí)行函數(shù)。

// 使用庫的方法
LibraryName.doSomething();

編寫的庫將通過 CommonJS 規(guī)范導(dǎo)出。

假如配置了 output.library="LibraryName"，則輸出和使用的代碼如下：

// Webpack 輸出的代碼
exports["LibraryName"] = lib_code;

// 使用庫的方法
require("library-name-in-npm")["LibraryName"].doSomething();
// 其中 library-name-in-npm 是指模塊發(fā)布到 Npm 代碼倉庫時(shí)的名稱。

編寫的庫將通過 CommonJS2 規(guī)范導(dǎo)出，輸出和使用的代碼如下：

// Webpack 輸出的代碼
module.exports = lib_code;

// 使用庫的方法
require("library-name-in-npm").doSomething();

CommonJS2 和 CommonJS 規(guī)范很相似，差別在于 CommonJS 只能用 exports 導(dǎo)出，而 CommonJS2 在 CommonJS 的基礎(chǔ)上增加了 module.exports 的導(dǎo)出方式。
在 output.libraryTarget 為 commonjs2 時(shí)，配置 output.library 將沒有意義。

編寫的庫將通過 this 被賦值給通過 library 指定的名稱，輸出和使用的代碼如下：

// Webpack 輸出的代碼
this["LibraryName"] = lib_code;

// 使用庫的方法
this.LibraryName.doSomething();

編寫的庫將通過 window 被賦值給通過 library 指定的名稱，即把庫掛載到 window 上，輸出和使用的代碼如下：

// Webpack 輸出的代碼
window["LibraryName"] = lib_code;

// 使用庫的方法
window.LibraryName.doSomething();

編寫的庫將通過 global 被賦值給通過 library 指定的名稱，即把庫掛載到 global 上，輸出和使用的代碼如下：

// Webpack 輸出的代碼
global["LibraryName"] = lib_code;

// 使用庫的方法
global.LibraryName.doSomething();

HappyPack就能讓W(xué)ebpack把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

install

由于webpack 4.0 剛剛發(fā)布，響應(yīng)的插件還沒有更新完，不過可以在后面加一個(gè)@next來安裝即將發(fā)布的版本

npm i happypack@next -D

webpack.config.js

module: {
        rules: [
            {
                test: /.css$/,
                use: "happypack/loader?id=css",
                //把對(duì).js文件的處理轉(zhuǎn)交給id為babel的HappyPack實(shí)例
                //用唯一的標(biāo)識(shí)符id來代表當(dāng)前的HappyPack是用來處理一類特定文件
                include: path.resolve("./src"),
                exclude: /node_modules/
            },
            {
                test: /.js/,
                use: "happypack/loader?id=babel",
                include: path.resolve("./src"),
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        }),
        new HappyPack({
            id: "babel",
            loaders: ["babel-loader"]// 和rules里的配置相同
        }),
        new HappyPack({
            id: "css",
            loaders: ["style-loader", "css-loader"]// 和rules里的配置相同
        }),
    ]

可以把對(duì)JS文件的串行壓縮變?yōu)殚_啟多個(gè)子進(jìn)程并行執(zhí)行

insatll

npm install webpack-parallel-uglify-plugin -D

webpackage.config.js

new ParallelUglifyPlugin({
            workerCount: os.cpus().length - 1,//開啟幾個(gè)子進(jìn)程去并發(fā)的執(zhí)行壓縮。默認(rèn)是當(dāng)前運(yùn)行電腦的 CPU 核數(shù)減去1
            uglifyJS: {
                output: {
                    beautify: false, //不需要格式化
                    comments: true, //不保留注釋
                },
                compress: {
                    warnings: false, // 在UglifyJs刪除沒有用到的代碼時(shí)不輸出警告
                    drop_console: true, // 刪除所有的 `console` 語句，可以兼容ie瀏覽器
                    collapse_vars: true, // 內(nèi)嵌定義了但是只用到一次的變量
                    reduce_vars: true, // 提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值
                }
            }
        })

可以監(jiān)聽文件變化，當(dāng)文件發(fā)生變化的時(shí)候重新編譯

watch: true, 
watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, 
    poll: 1 
}

watch

只有在開啟監(jiān)聽模式時(shí)(watch為true)，watchOptions才有意義

aggregateTimeout

監(jiān)聽到變化發(fā)生后等300(ms)再去執(zhí)行動(dòng)作，防止文件更新太快導(dǎo)致編譯頻率太高

poll

通過不停的詢問文件是否改變來判斷文件是否發(fā)生變化，默認(rèn)每秒詢問1000次

文件監(jiān)聽流程

webpack定時(shí)獲取文件的更新時(shí)間，并跟上次保存的時(shí)間進(jìn)行比對(duì)，不一致就表示發(fā)生了變化,poll就用來配置每秒問多少次。

當(dāng)檢測文件不再發(fā)生變化，會(huì)先緩存起來，等等待一段時(shí)間后之后再通知監(jiān)聽者，這個(gè)等待時(shí)間通過aggregateTimeout配置。

webpack只會(huì)監(jiān)聽entry依賴的文件
我們需要盡可能減少需要監(jiān)聽的文件數(shù)量和檢查頻率，當(dāng)然頻率的降低會(huì)導(dǎo)致靈敏度下降。

devServer: {
    inline: true
},

webpack負(fù)責(zé)監(jiān)聽文件變化，webpack-dev-server負(fù)責(zé)刷新瀏覽器。這些文件會(huì)被打包到chunk中，它們會(huì)代理客戶端向服務(wù)器發(fā)起WebSocket連接

模塊熱替換(Hot Module Replacement)的技術(shù)可在不刷新整個(gè)網(wǎng)頁的情況下只更新指定的模塊.

原理是當(dāng)一個(gè)源碼發(fā)生變化時(shí)，只重新編譯發(fā)生變化的模塊，再用新輸出的模塊替換掉瀏覽器中對(duì)應(yīng)的老模塊

反應(yīng)更快，時(shí)間更短

不刷新網(wǎng)頁可以保留網(wǎng)頁運(yùn)行狀態(tài)

監(jiān)聽更少的文件

忽略掉 node_modules 目錄下的文件

webpack.config.js

devServer: {
   hot:true//將hot設(shè)置為true
},

// 需要的插件
plugins: [
    new webpack.NamedModulesPlugin(),//顯示模塊的相對(duì)路徑
    new webpack.HotModuleReplacementPlugin()// 啟動(dòng)熱加載功能
]

code

if (module.hot) {
    module.hot.accept("./hot.js", () => {
        let hot = require("./hot");
        document.getElementById("app2").innerHTML = hot + "1";
    })
}

需要熱加載的模塊需要在初始化的時(shí)候引入到模塊中，否則不會(huì)觸發(fā)HMR。

在開發(fā)網(wǎng)頁的時(shí)候，一般都會(huì)有多套運(yùn)行環(huán)境，例如,在開發(fā)過程中方便開發(fā)調(diào)試的環(huán)境。發(fā)布到線上給用戶使用的運(yùn)行環(huán)境。

線上的環(huán)境和開發(fā)環(huán)境區(qū)別主要有以下不同：

線上的代碼被壓縮

開發(fā)環(huán)境可能會(huì)打印只有開發(fā)者才能看到的日志

開發(fā)環(huán)境和線上環(huán)境后端數(shù)據(jù)接口可能不同

package.json

cross-env跨平臺(tái)設(shè)置環(huán)境變量(后面沒有&&)

"scripts": {
    "build-dev": "cross-env NODE_ENV=development webpack --mode development",
    "build-prod": "cross-env NODE_ENV=production webpack --mode production"
}

webpack.config.js

根據(jù)環(huán)境變量區(qū)分生產(chǎn)環(huán)境還是開發(fā)環(huán)境，然后和webpack.base.config.js合并，生產(chǎn)環(huán)境（或者開發(fā)環(huán)境）的優(yōu)先級(jí)高于webpack.base.config.js的配置。

let merge = require("webpack-merge");
let base = require("./webpack.base.config");
let other = null;
if (process.env.NODE_ENV === "development") {
    other = require("./webpack.dev.config");
} else {
    other = require("./webapack.prod.config");
}
module.exports = merge(base, other);

webpack.base.config.js

基本配置

webpack.DefinePlugin 定義環(huán)境變量

基本配置...
plugins: [
    new webpack.DefinePlugin({
        __isDevelopment__: JSON.stringify(process.env.NODE_ENV == "development")
    })
]

webpack.dev.config.js

以output舉例,如果開發(fā)和生產(chǎn)環(huán)境的參數(shù)不同，就會(huì)覆蓋webpack.base.config.js里面的配置

const path = require("path");
module.exports = {
    output: {
        path: path.resolve("./dist"),
        filename: "[name].dev.[hash:2].js"
    }
};

webpack.prod.config.js

（以output舉例）

const path = require("path");
module.exports = {
    output: {
        path: path.resolve("./dist"),
        filename: "[name].prod.[hash:8].js"
    }
};

base.js

配置文件中的webpack.DefinePlugin定義的變量（__isDevelopment__），在入口文件和入口文件引用的其他文件中都可以獲取到__isDevelopment__的值

let env = null;
if (__isDevelopment__) {
    env = "dev";
} else {
    env = "prod";
}
module.exports = env;

index.js

let env = require("./base.js");
if (__isDevelopment__) {
    console.log("dev");
} else {
    console.log("prod");
}
console.log("env", env);

/*
prod
env prod
*/

webpack.DefinePlugin

定義環(huán)境變量的值時(shí)用 JSON.stringify 包裹字符串的原因是環(huán)境變量的值需要是一個(gè)由雙引號(hào)包裹的字符串，而 JSON.stringify("production")的值正好等于""production""

CDN 又叫內(nèi)容分發(fā)網(wǎng)絡(luò)，通過把資源部署到世界各地，用戶在訪問時(shí)按照就近原則從離用戶最近的服務(wù)器獲取資源，從而加速資源的獲取速度。

HTML文件不緩存，放在自己的服務(wù)器上，關(guān)閉自己服務(wù)器的緩存，靜態(tài)資源的URL變成指向CDN服務(wù)器的地址

靜態(tài)的JavaScript、CSS、圖片等文件開啟CDN和緩存，并且文件名帶上HASH值

為了并行加載不阻塞，把不同的靜態(tài)資源分配到不同的CDN服務(wù)器上

tree Shaking 可以用來剔除JavaScript中用不上的死代碼。

它依賴靜態(tài)的ES6模塊化語法，例如通過import和export導(dǎo)入導(dǎo)出

不要編譯ES6模塊

use: {
    loader: "babel-loader",
    query: {
        presets: [
            [
                "env", {
                    modules: false //含義是關(guān)閉 Babel 的模塊轉(zhuǎn)換功能，保留原本的 ES6 模塊化語法
                }
            ],
            "react"
        ]
    }
},

需要注意的是它依賴靜態(tài)的ES6模塊化語法，例如通過import和export導(dǎo)入導(dǎo)出。也就是說如果項(xiàng)目代碼運(yùn)行在不支持es6語法的環(huán)境上，Tree Shaking也就沒有意義了。

大網(wǎng)站有多個(gè)頁面，每個(gè)頁面由于采用相同技術(shù)棧和樣式代碼，會(huì)包含很多公共代碼，如果都包含進(jìn)來會(huì)有問題

相同的資源被重復(fù)的加載，浪費(fèi)用戶的流量和服務(wù)器的成本；
每個(gè)頁面需要加載的資源太大，導(dǎo)致網(wǎng)頁首屏加載緩慢，影響用戶體驗(yàn)。 如果能把公共代碼抽離成多帶帶文件進(jìn)行加載能進(jìn)行優(yōu)化，可以減少網(wǎng)絡(luò)傳輸流量，降低服務(wù)器成本

不同類型的文件，打包后的代碼塊也不同：

基礎(chǔ)類庫，方便長期緩存

頁面之間的公用代碼

各個(gè)頁面多帶帶生成文件

webpack.config.js

 optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {// 頁面之間的公用代碼
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                },
                vendor: {// 基礎(chǔ)類庫
                    chunks: "initial",
                    test: /node_modules/,
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },

./src/pageA.js

require("./utils/utility1.js");
require("./utils/utility2.js");
require("react");

./src/pageB.js

require("./utils/utility2.js");
require("./utils/utility3.js");

./src/pageC.js

require("./utils/utility2.js");
require("./utils/utility3.js");

utils/utility1.js

module.exports = 1;

utils/utility2.js

module.exports = 2;

utils/utility3.js

module.exports = 3;

打包后的結(jié)果

上述三種代碼的生成的結(jié)果，如下圖：

Scope Hoisting 可以讓 Webpack 打包出來的代碼文件更小、運(yùn)行的更快， 它又譯作 "作用域提升"，是在 Webpack3 中新推出的功能。

代碼體積更小，因?yàn)楹瘮?shù)申明語句會(huì)產(chǎn)生大量代碼

代碼在運(yùn)行時(shí)因?yàn)閯?chuàng)建的函數(shù)作用域更少了，內(nèi)存開銷也隨之變小 hello.js

package.json

 "build": "webpack  --display-optimization-bailout --mode development",

webpack.config.js

plugins: [
    new ModuleConcatenationPlugin()
    ],

./h.js

export default "scope hoist"

./index.js

import str from "./h.js"
console.log(str);

必須使用ES6語法，否則不起作用（--display-optimization-bailout 參數(shù)會(huì)提示）

代碼分離是 webpack 中最引人注目的特性之一。此特性能夠把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些文件。 有三種常用的代碼分離方法：

入口起點(diǎn)：使用 entry 配置手動(dòng)地分離代碼。

防止重復(fù)：使用 splitChunks 去重和分離 chunk。

動(dòng)態(tài)導(dǎo)入：通過模塊的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼。

入口起點(diǎn)和防止重復(fù)上面已經(jīng)提到了，下面我們重點(diǎn)講一下動(dòng)態(tài)導(dǎo)入

用戶當(dāng)前需要用什么功能就只加載這個(gè)功能對(duì)應(yīng)的代碼，也就是所謂的按需加載 在給單頁應(yīng)用做按需加載優(yōu)化時(shí)，一般采用以下原則：

對(duì)網(wǎng)站功能進(jìn)行劃分，每一類一個(gè)chunk

對(duì)于首次打開頁面需要的功能直接加載，盡快展示給用戶

某些依賴大量代碼的功能點(diǎn)可以按需加載

被分割出去的代碼需要一個(gè)按需加載的時(shí)機(jī)

使用import(module)的語法

import 異步 加載 模塊是一個(gè)es7的語法

在webpack里import是一個(gè)天然的分割點(diǎn)

document.getElementById("play").addEventListener("click",function(){
    import("./vedio.js").then(function(video){
        let name = video.getName();
        console.log(name);
    });
});

webpack官方文檔

webpack官方文檔中文版

webpackGitHub