前言

我們繼續(xù)前面的內(nèi)容，把webpack剩下的配置項(xiàng)擼一遍，推薦大家先看一下前面的文章：

• webpack源碼解析一
• webpack源碼解析二（html-webpack-plugin插件）
• webpack源碼解析三
• webpack源碼解析四

配置

devtool

此選項(xiàng)控制是否生成，以及如何生成 source map。

什么是Source map？

簡(jiǎn)單說(shuō)，Source map就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說(shuō)，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置（source map更多的介紹跟怎么使用就不在這里分析了）

string or false

選擇一種 source map 格式來(lái)增強(qiáng)調(diào)試過(guò)程。不同的值會(huì)明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。

webpack 倉(cāng)庫(kù)中包含一個(gè) 顯示所有 devtool 變體效果的示例。這些例子或許會(huì)有助于你理解這些差異之處。

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 來(lái)替代使用 devtool 選項(xiàng)，因?yàn)樗懈嗟倪x項(xiàng)。切勿同時(shí)使用 devtool 選項(xiàng)和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 選項(xiàng)在內(nèi)部添加過(guò)這些插件，所以你最終將應(yīng)用兩次插件。

其中一些值適用于開(kāi)發(fā)環(huán)境，一些適用于生產(chǎn)環(huán)境。對(duì)于開(kāi)發(fā)環(huán)境，通常希望更快速的 source map，需要添加到 bundle 中以增加體積為代價(jià)，但是對(duì)于生產(chǎn)環(huán)境，則希望更精準(zhǔn)的 source map，需要從 bundle 中分離并獨(dú)立存在。

Chrome 中的 source map 有一些問(wèn)題。我們需要你的幫助！。

查看 output.sourceMapFilename 自定義生成的 source map 的文件名。

品質(zhì)說(shuō)明(quality)

打包后的代碼 - 將所有生成的代碼視為一大塊代碼。你看不到相互分離的模塊。

生成后的代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋?？梢钥吹?webpack 生成的代碼。示例：你會(huì)看到類似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();，而不是 import {test} from "module"; test();。

轉(zhuǎn)換過(guò)的代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋?？梢钥吹?webpack 轉(zhuǎn)換前、loader 轉(zhuǎn)譯后的代碼。示例：你會(huì)看到類似 import {test} from "module"; var A = function(_test) { ... }(test);，而不是 import {test} from "module"; class A extends test {}。

原始源代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋。你會(huì)看到轉(zhuǎn)譯之前的代碼，正如編寫它時(shí)。這取決于 loader 支持。

無(wú)源代碼內(nèi)容 - source map 中不包含源代碼內(nèi)容。瀏覽器通常會(huì)嘗試從 web 服務(wù)器或文件系統(tǒng)加載源代碼。你必須確保正確設(shè)置 output.devtoolModuleFilenameTemplate，以匹配源代碼的 url。

（僅限行） - source map 被簡(jiǎn)化為每行一個(gè)映射。這通常意味著每個(gè)語(yǔ)句只有一個(gè)映射（假設(shè)你使用這種方式）。這會(huì)妨礙你在語(yǔ)句級(jí)別上調(diào)試執(zhí)行，也會(huì)妨礙你在每行的一些列上設(shè)置斷點(diǎn)。與壓縮后的代碼組合后，映射關(guān)系是不可能實(shí)現(xiàn)的，因?yàn)閴嚎s工具通常只會(huì)輸出一行。

對(duì)于開(kāi)發(fā)環(huán)境

以下選項(xiàng)非常適合開(kāi)發(fā)環(huán)境：

eval - 每個(gè)模塊都使用 eval() 執(zhí)行，并且都有 //@ sourceURL。此選項(xiàng)會(huì)非?？斓貥?gòu)建。主要缺點(diǎn)是，由于會(huì)映射到轉(zhuǎn)換后的代碼，而不是映射到原始代碼（沒(méi)有從 loader 中獲取 source map），所以不能正確的顯示行數(shù)。

eval-source-map - 每個(gè)模塊使用 eval() 執(zhí)行，并且 source map 轉(zhuǎn)換為 DataUrl 后添加到 eval() 中。初始化 source map 時(shí)比較慢，但是會(huì)在重新構(gòu)建時(shí)提供比較快的速度，并且生成實(shí)際的文件。行數(shù)能夠正確映射，因?yàn)闀?huì)映射到原始代碼中。它會(huì)生成用于開(kāi)發(fā)環(huán)境的最佳品質(zhì)的 source map。

cheap-eval-source-map - 類似 eval-source-map，每個(gè)模塊使用 eval() 執(zhí)行。這是 "cheap(低開(kāi)銷)" 的 source map，因?yàn)樗鼪](méi)有生成列映射(column mapping)，只是映射行數(shù)。它會(huì)忽略源自 loader 的 source map，并且僅顯示轉(zhuǎn)譯后的代碼，就像 eval devtool。

cheap-module-eval-source-map - 類似 cheap-eval-source-map，并且，在這種情況下，源自 loader 的 source map 會(huì)得到更好的處理結(jié)果。然而，loader source map 會(huì)被簡(jiǎn)化為每行一個(gè)映射(mapping)。

特定場(chǎng)景

以下選項(xiàng)對(duì)于開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境并不理想。他們是一些特定場(chǎng)景下需要的，例如，針對(duì)一些第三方工具。

inline-source-map - source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。

cheap-source-map - 沒(méi)有列映射(column mapping)的 source map，忽略 loader source map。

inline-cheap-source-map - 類似 cheap-source-map，但是 source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。

cheap-module-source-map - 沒(méi)有列映射(column mapping)的 source map，將 loader source map 簡(jiǎn)化為每行一個(gè)映射(mapping)。

inline-cheap-module-source-map - 類似 cheap-module-source-map，但是 source mapp 轉(zhuǎn)換為 DataUrl 添加到 bundle 中。

對(duì)于生產(chǎn)環(huán)境

這些選項(xiàng)通常用于生產(chǎn)環(huán)境中：

(none)（省略 devtool 選項(xiàng)） - 不生成 source map。這是一個(gè)不錯(cuò)的選擇。

source-map - 整個(gè) source map 作為一個(gè)單獨(dú)的文件生成。它為 bundle 添加了一個(gè)引用注釋，以便開(kāi)發(fā)工具知道在哪里可以找到它。

你應(yīng)該將你的服務(wù)器配置為，不允許普通用戶訪問(wèn) source map 文件！

hidden-source-map - 與 source-map 相同，但不會(huì)為 bundle 添加引用注釋。如果你只想 source map 映射那些源自錯(cuò)誤報(bào)告的錯(cuò)誤堆棧跟蹤信息，但不想為瀏覽器開(kāi)發(fā)工具暴露你的 source map，這個(gè)選項(xiàng)會(huì)很有用。

你不應(yīng)將 source map 文件部署到 web 服務(wù)器。而是只將其用于錯(cuò)誤報(bào)告工具。

nosources-source-map - 創(chuàng)建的 source map 不包含 sourcesContent(源代碼內(nèi)容)。它可以用來(lái)映射客戶端上的堆棧跟蹤，而無(wú)須暴露所有的源代碼。你可以將 source map 文件部署到 web 服務(wù)器。

這仍然會(huì)暴露反編譯后的文件名和結(jié)構(gòu)，但它不會(huì)暴露原始代碼。

在使用 uglifyjs-webpack-plugin 時(shí) 你必須提供 sourceMap：true 選項(xiàng)來(lái)啟用 source map 支持。

以上是官網(wǎng)的描述，我們大概知道了sourcemap這個(gè)東西，下面我們結(jié)合demo對(duì)幾個(gè)常用的devtool做一下測(cè)試。

eval(默認(rèn))

打包過(guò)后的代碼。

對(duì)應(yīng)配置文件，

webpack.config.js：

const path = require("path");
module.exports = {
    mode: "development",
    context: path.resolve(__dirname, "./src"),
    // entry: ["babel-polyfill","./index.js"]
    entry: {
        app: ["./index.js"]
    },
    output: {
        path: path.join(process.cwd(), "lib"), //默認(rèn)為path.join(process.cwd(), "dist")
        pathinfo: true,
        filename: "[name].[contenthash:16].[fullhash:16].[id].js",
        chunkFilename: "[id].js",
        // library: "demoSay",
        // libraryExport: "default",
        // libraryTarget: "jsonp",

    },
    experiments: {
        // outputModule: true
    },
    module: {
        noParse: /babel-polyfill/,
        rules: [
            {
                test: /.vue$/,
                use: 'vue-loader',
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.png$/,
                oneOf: [
                    {
                        resourceQuery: /inline/,
                        loader: "url-loader",
                        options: {
                            limit: 1024 * 1024 * 10
                        }
                    },
                    {
                        resourceQuery: /external/,
                        loader: "file-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        unsafeCache: /demo-publicpath/,
    },
    plugins: [
        new (require("vue-loader-plugin"))()
    ],
    devServer: {
        before(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        },
        after(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        },
        clientLogLevel: "info",
        allowedHosts: [
            "localhost"
        ],
        contentBase: path.join(process.cwd(), "lib"),
        // contentBasePublicPath: "/assets",
        filename: /app\.js/,
        headers: {
            'X-Custom-Foo': 'bar'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        port: "8090",
        hot: true,
        liveReload: false,
        open: true,
        useLocalIp: true,
        overlay: true,
        publicPath: "/dist/"
    },
    devtool: "eval"
};

然后運(yùn)行webpack-dev-server：

192:webpack-demo yinqingyang$ node ./node_modules/webpack/node_modules/.bin/webpack-dev-server

然后訪問(wèn)入口文件：http://192.168.2.103:8090/dist/app.dce652981f001848.1b5476d5f9831bfb.app

在這里插入圖片描述

可以看到，瀏覽器中顯示了我們打包過(guò)后的文件，比如index.js:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _demo_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./demo-vue */ "./demo-vue.vue");
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ "../node_modules/vue/dist/vue.runtime.esm.js");
/* harmony import */ var demo_publicpath__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! demo-publicpath */ "./demo-publicpath.js");
__webpack_require__.p = "/";



const root=document.createElement("div");
root.id="app";
document.body.appendChild(root)
const app=new vue__WEBPACK_IMPORTED_MODULE_1__.default({
    render:(h)=>h(_demo_vue__WEBPACK_IMPORTED_MODULE_0__.default)
});
app.$mount(root);

false

關(guān)閉生成source map，我們修改一下配置文件，

webpack.config.js：

const path = require("path");
module.exports = {
    mode: "development",
    context: path.resolve(__dirname, "./src"),
    // entry: ["babel-polyfill","./index.js"]
    entry: {
        app: ["./index.js"]
    },
    output: {
        path: path.join(process.cwd(), "lib"), //默認(rèn)為path.join(process.cwd(), "dist")
        pathinfo: true,
        filename: "[name].[contenthash:16].[fullhash:16].[id].js",
        chunkFilename: "[id].js",
        // library: "demoSay",
        // libraryExport: "default",
        // libraryTarget: "jsonp",

    },
    experiments: {
        // outputModule: true
    },
    module: {
        noParse: /babel-polyfill/,
        rules: [
            {
                test: /.vue$/,
                use: 'vue-loader',
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.png$/,
                oneOf: [
                    {
                        resourceQuery: /inline/,
                        loader: "url-loader",
                        options: {
                            limit: 1024 * 1024 * 10
                        }
                    },
                    {
                        resourceQuery: /external/,
                        loader: "file-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        unsafeCache: /demo-publicpath/,
    },
    plugins: [
        new (require("vue-loader-plugin"))()
    ],
    devServer: {
        before(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        },
        after(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        },
        clientLogLevel: "info",
        allowedHosts: [
            "localhost"
        ],
        contentBase: path.join(process.cwd(), "lib"),
        // contentBasePublicPath: "/assets",
        filename: /app\.js/,
        headers: {
            'X-Custom-Foo': 'bar'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        port: "8090",
        hot: true,
        liveReload: false,
        open: true,
        useLocalIp: true,
        overlay: true,
        publicPath: "/dist/"
    },
    devtool: false
};

然后運(yùn)行webpack-dev-server：

192:webpack-demo yinqingyang$ node ./node_modules/webpack/node_modules/.bin/webpack-dev-server

然后訪問(wèn)入口文件：http://192.168.2.103:8090/dist/app.b4fe93c6b41eec70.7b916ef02bd517e8.app

在這里插入圖片描述

可以看到，沒(méi)有對(duì)應(yīng)的sourcemap展示。

eval-cheap-module-source-map

原始的代碼（僅限行）

在這里插入圖片描述

Ok! 可以看到，webpack給我們展示了demo-vue.vue的原始代碼，這樣我們斷點(diǎn)就清晰多了，index.html也是會(huì)源碼顯示，但是會(huì)發(fā)現(xiàn)并沒(méi)有層級(jí)的概念，都在一個(gè)目錄里面，這就是“eval-cheap-module-source-map”的用法。

建議

ok，其它的就不演示了，小伙伴自己跑跑看效果，在平時(shí)項(xiàng)目中一般建議用“eval-cheap-module-source-map”，這樣速度跟調(diào)試都還可以，也不要被網(wǎng)上或者別人說(shuō)的限定死，要靈活運(yùn)用，比如你工程很小，那速度慢也慢不到哪去，直接聲明“source-map”也是可以的。

生成環(huán)境一定不能打開(kāi)devtool哦！

源碼：

當(dāng)然，你也可以不用配置devtool，直接搭配使用plugin也是可以的，比如源碼：

lib/WebpackOptionsApply.js

...
if (options.devtool) {
            if (options.devtool.includes("source-map")) {
                const hidden = options.devtool.includes("hidden");
                const inline = options.devtool.includes("inline");
                const evalWrapped = options.devtool.includes("eval");
                const cheap = options.devtool.includes("cheap");
                const moduleMaps = options.devtool.includes("module");
                const noSources = options.devtool.includes("nosources");
                const Plugin = evalWrapped
                    ? require("./EvalSourceMapDevToolPlugin")
                    : require("./SourceMapDevToolPlugin");
                new Plugin({
                    filename: inline ? null : options.output.sourceMapFilename,
                    moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
                    fallbackModuleFilenameTemplate:
                        options.output.devtoolFallbackModuleFilenameTemplate,
                    append: hidden ? false : undefined,
                    module: moduleMaps ? true : cheap ? false : true,
                    columns: cheap ? false : true,
                    noSources: noSources,
                    namespace: options.output.devtoolNamespace
                }).apply(compiler);
            } else if (options.devtool.includes("eval")) {
                const EvalDevToolModulePlugin = require("./EvalDevToolModulePlugin");
                new EvalDevToolModulePlugin({
                    moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
                    namespace: options.output.devtoolNamespace
                }).apply(compiler);
            }
        }
...

target

string | function(compiler)

告知 webpack 為目標(biāo)(target)指定一個(gè)環(huán)境,webpack 能夠?yàn)槎喾N環(huán)境或 target 構(gòu)建編譯。

webpack內(nèi)置的target等于讓你選擇某個(gè)target后，webpack會(huì)為特定的target導(dǎo)入一組默認(rèn)插件，我們直接找到源碼：

lib/WebpackOptionsApply.js

        if (typeof options.target === "string") {
            switch (options.target) {
                case "web": {
                    const JsonpTemplatePlugin = require("./web/JsonpTemplatePlugin");
                    const FetchCompileWasmPlugin = require("./web/FetchCompileWasmPlugin");
                    const FetchCompileAsyncWasmPlugin = require("./web/FetchCompileAsyncWasmPlugin");
                    const NodeSourcePlugin = require("./node/NodeSourcePlugin");
                    new JsonpTemplatePlugin().apply(compiler);
                    new FetchCompileWasmPlugin({
                        mangleImports: options.optimization.mangleWasmImports
                    }).apply(compiler);
                    new FetchCompileAsyncWasmPlugin().apply(compiler);
                    new NodeSourcePlugin(options.node).apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    break;
                }
                case "webworker": {
                    const WebWorkerTemplatePlugin = require("./webworker/WebWorkerTemplatePlugin");
                    const FetchCompileWasmPlugin = require("./web/FetchCompileWasmPlugin");
                    const FetchCompileAsyncWasmPlugin = require("./web/FetchCompileAsyncWasmPlugin");
                    const NodeSourcePlugin = require("./node/NodeSourcePlugin");
                    const StartupChunkDependenciesPlugin = require("./runtime/StartupChunkDependenciesPlugin");
                    new WebWorkerTemplatePlugin().apply(compiler);
                    new FetchCompileWasmPlugin({
                        mangleImports: options.optimization.mangleWasmImports
                    }).apply(compiler);
                    new FetchCompileAsyncWasmPlugin().apply(compiler);
                    new NodeSourcePlugin(options.node).apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    new StartupChunkDependenciesPlugin({
                        asyncChunkLoading: true
                    }).apply(compiler);
                    break;
                }
                case "node":
                case "async-node": {
                    const NodeTemplatePlugin = require("./node/NodeTemplatePlugin");
                    const ReadFileCompileWasmPlugin = require("./node/ReadFileCompileWasmPlugin");
                    const ReadFileCompileAsyncWasmPlugin = require("./node/ReadFileCompileAsyncWasmPlugin");
                    const NodeTargetPlugin = require("./node/NodeTargetPlugin");
                    const StartupChunkDependenciesPlugin = require("./runtime/StartupChunkDependenciesPlugin");
                    new NodeTemplatePlugin({
                        asyncChunkLoading: options.target === "async-node"
                    }).apply(compiler);
                    new ReadFileCompileWasmPlugin({
                        mangleImports: options.optimization.mangleWasmImports
                    }).apply(compiler);
                    new ReadFileCompileAsyncWasmPlugin().apply(compiler);
                    new NodeTargetPlugin().apply(compiler);
                    new LoaderTargetPlugin("node").apply(compiler);
                    new StartupChunkDependenciesPlugin({
                        asyncChunkLoading: options.target === "async-node"
                    }).apply(compiler);
                    break;
                }
                case "node-webkit": {
                    const JsonpTemplatePlugin = require("./web/JsonpTemplatePlugin");
                    const NodeTargetPlugin = require("./node/NodeTargetPlugin");
                    const ExternalsPlugin = require("./ExternalsPlugin");
                    const StartupChunkDependenciesPlugin = require("./runtime/StartupChunkDependenciesPlugin");
                    new JsonpTemplatePlugin().apply(compiler);
                    new NodeTargetPlugin().apply(compiler);
                    new ExternalsPlugin("commonjs", "nw.gui").apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    new StartupChunkDependenciesPlugin({
                        asyncChunkLoading: true
                    }).apply(compiler);
                    break;
                }
                case "electron-main": {
                    const NodeTemplatePlugin = require("./node/NodeTemplatePlugin");
                    const NodeTargetPlugin = require("./node/NodeTargetPlugin");
                    const ExternalsPlugin = require("./ExternalsPlugin");
                    const StartupChunkDependenciesPlugin = require("./runtime/StartupChunkDependenciesPlugin");
                    new NodeTemplatePlugin({
                        asyncChunkLoading: true
                    }).apply(compiler);
                    new NodeTargetPlugin().apply(compiler);
                    new ExternalsPlugin("commonjs", [
                        "app",
                        "auto-updater",
                        "browser-window",
                        "clipboard",
                        "content-tracing",
                        "crash-reporter",
                        "dialog",
                        "electron",
                        "global-shortcut",
                        "ipc",
                        "ipc-main",
                        "menu",
                        "menu-item",
                        "native-image",
                        "original-fs",
                        "power-monitor",
                        "power-save-blocker",
                        "protocol",
                        "screen",
                        "session",
                        "shell",
                        "tray",
                        "web-contents"
                    ]).apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    new StartupChunkDependenciesPlugin({
                        asyncChunkLoading: true
                    }).apply(compiler);
                    break;
                }
                case "electron-renderer":
                case "electron-preload": {
                    const FetchCompileWasmPlugin = require("./web/FetchCompileWasmPlugin");
                    const FetchCompileAsyncWasmPlugin = require("./web/FetchCompileAsyncWasmPlugin");
                    const NodeTargetPlugin = require("./node/NodeTargetPlugin");
                    const ExternalsPlugin = require("./ExternalsPlugin");
                    if (options.target === "electron-renderer") {
                        const JsonpTemplatePlugin = require("./web/JsonpTemplatePlugin");
                        new JsonpTemplatePlugin().apply(compiler);
                    } else if (options.target === "electron-preload") {
                        const NodeTemplatePlugin = require("./node/NodeTemplatePlugin");
                        new NodeTemplatePlugin({
                            asyncChunkLoading: true
                        }).apply(compiler);
                    }
                    new FetchCompileWasmPlugin({
                        mangleImports: options.optimization.mangleWasmImports
                    }).apply(compiler);
                    new FetchCompileAsyncWasmPlugin().apply(compiler);
                    new NodeTargetPlugin().apply(compiler);
                    new ExternalsPlugin("commonjs", [
                        "clipboard",
                        "crash-reporter",
                        "desktop-capturer",
                        "electron",
                        "ipc",
                        "ipc-renderer",
                        "native-image",
                        "original-fs",
                        "remote",
                        "screen",
                        "shell",
                        "web-frame"
                    ]).apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    break;
                }
                default:
                    throw new Error("Unsupported target '" + options.target + "'.");
            }
        }

可以看到，默認(rèn)有：web、webworker、node、async-node、node-webkit、electron-main、electron-renderer、electron-preload，我們?yōu)g覽器應(yīng)用默認(rèn)用的是web選項(xiàng)，然后webpack會(huì)對(duì)特定的target導(dǎo)入一些基礎(chǔ)配置：

case "web": {
                    const JsonpTemplatePlugin = require("./web/JsonpTemplatePlugin");
                    const FetchCompileWasmPlugin = require("./web/FetchCompileWasmPlugin");
                    const FetchCompileAsyncWasmPlugin = require("./web/FetchCompileAsyncWasmPlugin");
                    const NodeSourcePlugin = require("./node/NodeSourcePlugin");
                    new JsonpTemplatePlugin().apply(compiler);
                    new FetchCompileWasmPlugin({
                        mangleImports: options.optimization.mangleWasmImports
                    }).apply(compiler);
                    new FetchCompileAsyncWasmPlugin().apply(compiler);
                    new NodeSourcePlugin(options.node).apply(compiler);
                    new LoaderTargetPlugin(options.target).apply(compiler);
                    break;
                }

除了默認(rèn)的一些配置外，一些插件可能也需要利用target做不同的操作。

externals

string` `array` `object` `function` `regex

防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)。

例如，從 CDN 引入 jQuery，而不是把它打包：

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

這樣就剝離了那些不需要改動(dòng)的依賴模塊，換句話，下面展示的代碼還可以正常運(yùn)行：

import $ from 'jquery';

$('.my-element').animate(...);

具有外部依賴(external dependency)的 bundle 可以在各種模塊上下文(module context)中使用，例如 CommonJS, AMD, 全局變量和 ES2015 模塊。外部 library 可能是以下任何一種形式：

• root：可以通過(guò)一個(gè)全局變量訪問(wèn) library（例如，通過(guò) script 標(biāo)簽）。
• commonjs：可以將 library 作為一個(gè) CommonJS 模塊訪問(wèn)。
• commonjs2：和上面的類似，但導(dǎo)出的是 module.exports.default.
• amd：類似于 commonjs，但使用 AMD 模塊系統(tǒng)。

可以接受各種語(yǔ)法……

string

請(qǐng)查看上面的例子。屬性名稱是 jquery，表示應(yīng)該排除 import $ from 'jquery' 中的 jquery 模塊。為了替換這個(gè)模塊，jQuery 的值將被用來(lái)檢索一個(gè)全局的 jQuery 變量。換句話說(shuō)，當(dāng)設(shè)置為一個(gè)字符串時(shí)，它將被視為全局的（定義在上面和下面）。

array

externals: {
  subtract: ['./math', 'subtract']
}

subtract: ['./math', 'subtract'] 轉(zhuǎn)換為父子結(jié)構(gòu)，其中 ./math 是父模塊，而 bundle 只引用 subtract 變量下的子集。

object

externals : {
  react: 'react'
}

// 或者

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // 指向全局變量
  }
}

// 或者

externals : {
  subtract : {
    root: ["math", "subtract"]
  }
}

此語(yǔ)法用于描述外部 library 所有可用的訪問(wèn)方式。這里 lodash 這個(gè)外部 library 可以在 AMD 和 CommonJS 模塊系統(tǒng)中通過(guò) lodash 訪問(wèn)，但在全局變量形式下用 _ 訪問(wèn)。subtract 可以通過(guò)全局 math 對(duì)象下的屬性 subtract 訪問(wèn)（例如 window['math']['subtract']）。

function

It might be useful to define your own function to control the behavior of what you want to externalize from webpack. webpack-node-externals, for example, excludes all modules from the node_modules directory and provides some options to, for example, whitelist packages.

It basically comes down to this:

externals: [
  function(context, request, callback) {
    if (/^yourregex$/.test(request)){
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }
],

The 'commonjs ' + request defines the type of module that needs to be externalized.

regex

Every dependency that matches the given regular expression will be excluded from the output bundles.

externals: /^(jquery|\$)$/i

In this case any dependency named jQuery, capitalized or not, or $ would be externalized.

以上是官網(wǎng)的描述，比如我們demo項(xiàng)目中使用了babel-polyfill，也如果在test.html中以cdn又引入了一遍的話，那就會(huì)重復(fù)引用了，所以我們直接把babel-polyfill當(dāng)成外部模塊就ok了，所以我們可以改一下配置文件：

webpack.config.js

const path = require("path");
module.exports = {
    mode: "development",
    context: path.resolve(__dirname, "./src"),
    entry: ["babel-polyfill","./index.js"]
    // entry: {
    //     app: ["./index.js"]
    // },
    output: {
        path: path.join(process.cwd(), "lib"), //默認(rèn)為path.join(process.cwd(), "dist")
        pathinfo: true,
        filename: "[name].[contenthash:16].[fullhash:16].[id].js",
        chunkFilename: "[id].js",
        // library: "demoSay",
        // libraryExport: "default",
        // libraryTarget: "jsonp",

    },
    experiments: {
        // outputModule: true
    },
    module: {
        noParse: /babel-polyfill/,
        rules: [
            {
                test: /.vue$/,
                use: 'vue-loader',
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.png$/,
                oneOf: [
                    {
                        resourceQuery: /inline/,
                        loader: "url-loader",
                        options: {
                            limit: 1024 * 1024 * 10
                        }
                    },
                    {
                        resourceQuery: /external/,
                        loader: "file-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        unsafeCache: /demo-publicpath/,
    },
    plugins: [
        new (require("vue-loader-plugin"))(),
        // new (require("uglifyjs-webpack-plugin"))({
        //     test: /\.js($|\?)/i
        // })
    ],
    devServer: {
        before(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        },
        after(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        },
        clientLogLevel: "info",
        allowedHosts: [
            "localhost"
        ],
        contentBase: path.join(process.cwd(), "lib"),
        // contentBasePublicPath: "/assets",
        filename: /app\.js/,
        headers: {
            'X-Custom-Foo': 'bar'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        port: "8090",
        hot: true,
        liveReload: false,
        open: true,
        useLocalIp: true,
        overlay: true,
        publicPath: "/dist/"
    },
    devtool: "source-map",
    externals: /babel-polyfill/
};

這樣webpack打包的時(shí)候就不會(huì)去加載babel-polyfill了。

performance

這些選項(xiàng)可以控制 webpack 如何通知「資源(asset)和入口起點(diǎn)超過(guò)指定文件限制」。 此功能受到 webpack 性能評(píng)估的啟發(fā)。

performance

object

配置如何展示性能提示。例如，如果一個(gè)資源超過(guò) 250kb，webpack 會(huì)對(duì)此輸出一個(gè)警告來(lái)通知你。

performance.hints

false | "error" | "warning"

打開(kāi)/關(guān)閉提示。此外，當(dāng)找到提示時(shí)，告訴 webpack 拋出一個(gè)錯(cuò)誤或警告。此屬性默認(rèn)設(shè)置為 "warning"。

給定一個(gè)創(chuàng)建后超過(guò) 250kb 的資源：

performance: {
  hints: false
}

不展示警告或錯(cuò)誤提示。

performance: {
  hints: "warning"
}

將展示一條警告，通知你這是體積大的資源。在開(kāi)發(fā)環(huán)境，我們推薦這樣。

performance: {
  hints: "error"
}

將展示一條錯(cuò)誤，通知你這是體積大的資源。在生產(chǎn)環(huán)境構(gòu)建時(shí)，我們推薦使用 hints: "error"，有助于防止把體積巨大的 bundle 部署到生產(chǎn)環(huán)境，從而影響網(wǎng)頁(yè)的性能。

performance.maxEntrypointSize

int

入口起點(diǎn)表示針對(duì)指定的入口，對(duì)于所有資源，要充分利用初始加載時(shí)(initial load time)期間。此選項(xiàng)根據(jù)入口起點(diǎn)的最大體積，控制 webpack 何時(shí)生成性能提示。默認(rèn)值是：250000 (bytes)。

performance: {
  maxEntrypointSize: 400000
}

performance.maxAssetSize

int

資源(asset)是從 webpack 生成的任何文件。此選項(xiàng)根據(jù)單個(gè)資源體積，控制 webpack 何時(shí)生成性能提示。默認(rèn)值是：250000 (bytes)。

performance: {
  maxAssetSize: 100000
}

performance.assetFilter

Function

此屬性允許 webpack 控制用于計(jì)算性能提示的文件。默認(rèn)函數(shù)如下：

function(assetFilename) {
    return !(/\.map$/.test(assetFilename))
};

你可以通過(guò)傳遞自己的函數(shù)來(lái)覆蓋此屬性：

performance: {
  assetFilter: function(assetFilename) {
    return assetFilename.endsWith('.js');
  }
}

以上示例將只給出 .js 文件的性能提示。

比如我們項(xiàng)目中限定一下，當(dāng)打包出來(lái)的文件超過(guò)1kb都提示錯(cuò)誤，

webpack.config.js:

const path = require("path");
module.exports = {
    mode: "development",
    context: path.resolve(__dirname, "./src"),
    entry: ["babel-polyfill","./index.js"],
    // entry: {
    //     app: ["./index.js"]
    // },
    output: {
        path: path.join(process.cwd(), "lib"), //默認(rèn)為path.join(process.cwd(), "dist")
        pathinfo: true,
        filename: "[name].[contenthash:16].[fullhash:16].[id].js",
        chunkFilename: "[id].js",
        // library: "demoSay",
        // libraryExport: "default",
        // libraryTarget: "jsonp",

    },
    experiments: {
        // outputModule: true
    },
    module: {
        noParse: /babel-polyfill/,
        rules: [
            {
                test: /.vue$/,
                use: 'vue-loader',
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js")
                            }
                        }
                    },
                    "sass-loader"
                ],
            },
            {
                test: /\.png$/,
                oneOf: [
                    {
                        resourceQuery: /inline/,
                        loader: "url-loader",
                        options: {
                            limit: 1024 * 1024 * 10
                        }
                    },
                    {
                        resourceQuery: /external/,
                        loader: "file-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            DemoVue: path.resolve(__dirname, "./src/demo-vue.vue")
        },
        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue'],
        modules: [path.resolve(__dirname, "src"), "node_modules"],
        unsafeCache: /demo-publicpath/,
    },
    plugins: [
        new (require("vue-loader-plugin"))(),
        // new (require("uglifyjs-webpack-plugin"))({
        //     test: /\.js($|\?)/i
        // })
    ],
    devServer: {
        before(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                req.query.name="hello "+req.query.name;
                next();
            });
        },
        after(app, server, compiler) {
            app.get("/login",(req,res,next)=>{
                res.json({msg: req.query.name});
            });
        },
        clientLogLevel: "info",
        allowedHosts: [
            "localhost"
        ],
        contentBase: path.join(process.cwd(), "lib"),
        // contentBasePublicPath: "/assets",
        filename: /app\.js/,
        headers: {
            'X-Custom-Foo': 'bar'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        port: "8090",
        hot: true,
        liveReload: false,
        open: true,
        useLocalIp: true,
        overlay: true,
        publicPath: "/dist/"
    },
    devtool: "source-map",
    externals: /babel-polyfill/,
    performance: {
        hints: "error",
        maxEntrypointSize: 1024
    }
};

然后我們運(yùn)行webpack打包：

192:webpack-demo yinqingyang$ npx webpack
Hash: 0ed0b14f25767f823548
Version: webpack 5.0.0-beta.7
Time: 1421ms
Built at: 2020-07-12 18:34:37
                                             Asset      Size
              63fe41824cb8236c0896a71b7df7f461.png  59.3 KiB  [compared for emit]        [name: (main)]
main.b02d930c34bcde5f.0ed0b14f25767f82.main.js.map   298 KiB  [compared for emit] [dev]  [name: (main)]
 + 1 hidden asset
Entrypoint main [big] = main.b02d930c34bcde5f.0ed0b14f25767f82.main.js (63fe41824cb8236c0896a71b7df7f461.png main.b02d930c34bcde5f.0ed0b14f25767f82.main.js.map)
external "babel-polyfill" 42 bytes [built]
./index.js 271 bytes [built]
./demo-vue.vue 1.21 KiB [built]
../node_modules/vue/dist/vue.runtime.esm.js 222 KiB [built]
./demo-publicpath.js 95 bytes [built]
./demo-vue.vue?vue&type=template&id=47a7e22a&scoped=true& 212 bytes [built]
./demo-vue.vue?vue&type=script&lang=js& 258 bytes [built]
./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 824 bytes [built]
../node_modules/vue-loader/lib/runtime/componentNormalizer.js 2.71 KiB [built]
../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=template&id=47a7e22a&scoped=true& 335 bytes [built]
../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=script&lang=js& 169 bytes [built]
../node_modules/style-loader/dist/cjs.js!../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 810 bytes [built]
../pub1.png?external 80 bytes [built]
../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.64 KiB [built]
../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 278 bytes [built]
    + 6 hidden modules

ERROR in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  main.b02d930c34bcde5f.0ed0b14f25767f82.main.js (258 KiB)

ERROR in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1 KiB). This can impact web performance.
Entrypoints:
  main (258 KiB)
      main.b02d930c34bcde5f.0ed0b14f25767f82.main.js


ERROR in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

192:webpack-demo yinqingyang$ 

ok，可以看到，直接提示我們報(bào)錯(cuò)了，說(shuō)入口文件打包后最大限制是“1kb”。

??，我們花了很多章節(jié)來(lái)介紹webpack的基礎(chǔ)用法，其實(shí)webpack最主要的就是插件跟loader，后面我們實(shí)戰(zhàn)一個(gè)項(xiàng)目然后具體分析一下用到的每個(gè)loader跟plugin，敬請(qǐng)期待！！