摘要：生成文件，是模塊構(gòu)建的終點(diǎn)，包括輸出文件與輸出路徑。這里配置了處理各模塊的，包括預(yù)處理，編譯，圖片處理。各插件對(duì)象，在的事件流中執(zhí)行對(duì)應(yīng)的方法。修改改成引入模塊在目錄下執(zhí)行，

本文抄自《深入淺出webpack》，建議想學(xué)習(xí)原理的手打一遍，操作一遍，給別人講一遍，然后就會(huì)了
在閱讀前希望您已有webpack相關(guān)的實(shí)踐經(jīng)驗(yàn)，不然讀了也讀不懂
本文閱讀需要幾分鐘，理解需要自己動(dòng)手操作蠻長(zhǎng)時(shí)間

首先簡(jiǎn)單看一下webpack配置文件(webpack.config.js):

var path = require("path");
var node_modules = path.resolve(__dirname, "node_modules");
var pathToReact = path.resolve(node_modules, "react/dist/react.min.js");

module.exports = {
  // 入口文件，是模塊構(gòu)建的起點(diǎn)，同時(shí)每一個(gè)入口文件對(duì)應(yīng)最后生成的一個(gè) chunk。
  entry: {
    bundle: [
      "webpack/hot/dev-server",
      "webpack-dev-server/client?http://localhost:8080",
      path.resolve(__dirname, "app/app.js")
    ]
  },
  // 文件路徑指向(可加快打包過程)。
  resolve: {
    alias: {
      "react": pathToReact
    }
  },
  // 生成文件，是模塊構(gòu)建的終點(diǎn)，包括輸出文件與輸出路徑。
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].js"
  },
  // 這里配置了處理各模塊的 loader ，包括 css 預(yù)處理 loader ，es6 編譯 loader，圖片處理 loader。
  module: {
    loaders: [
      {
        test: /.js$/,
        loader: "babel",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件對(duì)象，在 webpack 的事件流中執(zhí)行對(duì)應(yīng)的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

在了解webpack原理之前，需要掌握以下幾個(gè)核心概念

Entry: 入口，webpack構(gòu)建第一步從entry開始

module:模塊，在webpack中一個(gè)模塊對(duì)應(yīng)一個(gè)文件。webpack會(huì)從entry開始，遞歸找出所有依賴的模塊

Chunk：代碼塊，一個(gè)chunk由多個(gè)模塊組合而成，用于代碼合并與分割

Loader: 模塊轉(zhuǎn)換器，用于將模塊的原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容

Plugin:拓展插件，在webpack構(gòu)建流程中的特定時(shí)機(jī)會(huì)廣播對(duì)應(yīng)的事件，插件可以監(jiān)聽這些事件的發(fā)生，在特定的時(shí)機(jī)做對(duì)應(yīng)的事情

webpack從啟動(dòng)到結(jié)束依次執(zhí)行以下操作：

graph TD
初始化參數(shù) --> 開始編譯 
開始編譯 -->確定入口 
確定入口 --> 編譯模塊
編譯模塊 --> 完成編譯模塊
完成編譯模塊 --> 輸出資源
輸出資源 --> 輸出完成

各個(gè)階段執(zhí)行的操作如下：

初始化參數(shù)：從配置文件(默認(rèn)webpack.config.js)和shell語句中讀取與合并參數(shù)，得出最終的參數(shù)

開始編譯(compile)：用上一步得到的參數(shù)初始化Comiler對(duì)象，加載所有配置的插件，通過執(zhí)行對(duì)象的run方法開始執(zhí)行編譯

確定入口：根據(jù)配置中的entry找出所有的入口文件

編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的Loader對(duì)模塊進(jìn)行翻譯,再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過處理

完成編譯模塊：經(jīng)過第四步之后，得到了每個(gè)模塊被翻譯之后的最終內(nèi)容以及他們之間的依賴關(guān)系

輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的chunk，再將每個(gè)chunk轉(zhuǎn)換成一個(gè)多帶帶的文件加入輸出列表中，這是可以修改輸出內(nèi)容的最后機(jī)會(huì)

輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置(webpack.config.js && shell)確定輸出的路徑和文件名，將文件的內(nèi)容寫入文件系統(tǒng)中(fs)

在以上過程中，webpack會(huì)在特定的時(shí)間點(diǎn)廣播特定的事件，插件監(jiān)聽事件并執(zhí)行相應(yīng)的邏輯，并且插件可以調(diào)用webpack提供的api改變webpack的運(yùn)行結(jié)果

webpack構(gòu)建流程可分為以下三大階段。

初始化：?jiǎn)?dòng)構(gòu)建，讀取與合并配置參數(shù)，加載plugin,實(shí)例化Compiler

編譯：從Entry出發(fā)，針對(duì)每個(gè)Module串行調(diào)用對(duì)應(yīng)的Loader去翻譯文件中的內(nèi)容，再找到該Module依賴的Module，遞歸的進(jìn)行編譯處理

輸出：將編譯后的Module組合成Chunk,將Chunk轉(zhuǎn)換成文件，輸出到文件系統(tǒng)中

如果只執(zhí)行一次，流程如上，但在開啟監(jiān)聽模式下，流程如下圖

graph TD

  初始化-->編譯;
  編譯-->輸出;
  輸出-->文本發(fā)生變化
  文本發(fā)生變化-->編譯

在初始化階段會(huì)發(fā)生的事件如下

#### 1.3.2 編譯階段 (事件名全為小寫)

在編譯階段最重要的事件是compilation,因?yàn)樵赾ompilation階段調(diào)用了Loader,完成了每個(gè)模塊的==轉(zhuǎn)換==操作。在compilation階段又會(huì)發(fā)生很多小事件，如下表

輸出階段會(huì)發(fā)生的事件及解釋:

在輸出階段已經(jīng)得到了各個(gè)模塊經(jīng)過轉(zhuǎn)化后的結(jié)果和其依賴關(guān)系,并且將相應(yīng)的模塊組合在一起形成一個(gè)個(gè)chunk.在輸出階段根據(jù)chunk的類型,使用對(duì)應(yīng)的模板生成最終要輸出的文件內(nèi)容. |

//以下代碼用來包含webpack運(yùn)行過程中的每個(gè)階段
//file:webpack.config.js

const path = require("path");
//插件監(jiān)聽事件并執(zhí)行相應(yīng)的邏輯
class TestPlugin {
  constructor() {
    console.log("@plugin constructor");
  }

  apply(compiler) {
    console.log("@plugin apply");

    compiler.plugin("environment", (options) => {
      console.log("@environment");
    });

    compiler.plugin("after-environment", (options) => {
      console.log("@after-environment");
    });

    compiler.plugin("entry-option", (options) => {
      console.log("@entry-option");
    });

    compiler.plugin("after-plugins", (options) => {
      console.log("@after-plugins");
    });

    compiler.plugin("after-resolvers", (options) => {
      console.log("@after-resolvers");
    });

    compiler.plugin("before-run", (options, callback) => {
      console.log("@before-run");
      callback();
    });

    compiler.plugin("run", (options, callback) => {
      console.log("@run");
      callback();
    });

    compiler.plugin("watch-run", (options, callback) => {
      console.log("@watch-run");
      callback();
    });

    compiler.plugin("normal-module-factory", (options) => {
      console.log("@normal-module-factory");
    });

    compiler.plugin("context-module-factory", (options) => {
      console.log("@context-module-factory");
    });

    compiler.plugin("before-compile", (options, callback) => {
      console.log("@before-compile");
      callback();
    });

    compiler.plugin("compile", (options) => {
      console.log("@compile");
    });

    compiler.plugin("this-compilation", (options) => {
      console.log("@this-compilation");
    });

    compiler.plugin("compilation", (options) => {
      console.log("@compilation");
    });

    compiler.plugin("make", (options, callback) => {
      console.log("@make");
      callback();
    });

    compiler.plugin("compilation", (compilation) => {

      compilation.plugin("build-module", (options) => {
        console.log("@build-module");
      });

      compilation.plugin("normal-module-loader", (options) => {
        console.log("@normal-module-loader");
      });

      compilation.plugin("program", (options, callback) => {
        console.log("@program");
        callback();
      });

      compilation.plugin("seal", (options) => {
        console.log("@seal");
      });
    });

    compiler.plugin("after-compile", (options, callback) => {
      console.log("@after-compile");
      callback();
    });

    compiler.plugin("should-emit", (options) => {
      console.log("@should-emit");
    });

    compiler.plugin("emit", (options, callback) => {
      console.log("@emit");
      callback();
    });

    compiler.plugin("after-emit", (options, callback) => {
      console.log("@after-emit");
      callback();
    });

    compiler.plugin("done", (options) => {
      console.log("@done");
    });

    compiler.plugin("failed", (options, callback) => {
      console.log("@failed");
      callback();
    });

    compiler.plugin("invalid", (options) => {
      console.log("@invalid");
    });

  }
}

#在目錄下執(zhí)行
webpack
#輸出以下內(nèi)容
@plugin constructor
@plugin apply
@environment
@after-environment
@entry-option
@after-plugins
@after-resolvers
@before-run
@run
@normal-module-factory
@context-module-factory
@before-compile
@compile
@this-compilation
@compilation
@make
@build-module
@normal-module-loader
@build-module
@normal-module-loader
@seal
@after-compile
@should-emit
@emit
@after-emit
@done
Hash: 19ef3b418517e78b5286
Version: webpack 3.11.0
Time: 95ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.03 kB       0  [emitted]  main
   [0] ./main.js 44 bytes {0} [built]
   [1] ./show.js 114 bytes {0} [built]

下面通過 Webpack 構(gòu)建一個(gè)采用 CommonJS 模塊化編寫的項(xiàng)目，該項(xiàng)目有個(gè)網(wǎng)頁會(huì)通過 JavaScript 在網(wǎng)頁中顯示 Hello,Webpack。

運(yùn)行構(gòu)建前，先把要完成該功能的最基礎(chǔ)的 JavaScript 文件和 HTML 建立好，需要如下文件：

頁面入口文件 index.html

JS 工具函數(shù)文件 show.js

// 操作 DOM 元素，把 content 顯示到網(wǎng)頁上
function show(content) {
  window.document.getElementById("app").innerText = "Hello," + content;
}

// 通過 CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
module.exports = show;

JS 執(zhí)行入口文件 main.js

// 通過 CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = require("./show.js");
// 執(zhí)行 show 函數(shù)
show("Webpack");

Webpack 在執(zhí)行構(gòu)建時(shí)默認(rèn)會(huì)從項(xiàng)目根目錄下的 webpack.config.js 文件讀取配置，所以你還需要新建它，其內(nèi)容如下：

const path = require("path");

module.exports = {
  // JavaScript 執(zhí)行入口文件
  entry: "./main.js",
  output: {
    // 把所有依賴的模塊合并輸出到一個(gè) bundle.js 文件
    filename: "bundle.js",
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, "./dist"),
  }
};

由于 Webpack 構(gòu)建運(yùn)行在 Node.js 環(huán)境下，所以該文件最后需要通過 CommonJS 規(guī)范導(dǎo)出一個(gè)描述如何構(gòu)建的 Object 對(duì)象。

|-- index.html
|-- main.js
|-- show.js
|-- webpack.config.js

一切文件就緒，在項(xiàng)目根目錄下執(zhí)行 webpack 命令運(yùn)行 Webpack 構(gòu)建，你會(huì)發(fā)現(xiàn)目錄下多出一個(gè) dist目錄，里面有個(gè) bundle.js 文件， bundle.js 文件是一個(gè)可執(zhí)行的 JavaScript 文件，它包含頁面所依賴的兩個(gè)模塊 main.js 和 show.js 及內(nèi)置的 webpackBootstrap 啟動(dòng)函數(shù)。 這時(shí)你用瀏覽器打開 index.html 網(wǎng)頁將會(huì)看到 Hello,Webpack。

看之前記住：一個(gè)模塊就是一個(gè)文件，

首先看下bundle.js長(zhǎng)什么樣子：

注意：序號(hào)1處是個(gè)自執(zhí)行函數(shù)，序號(hào)2作為自執(zhí)行函數(shù)的參數(shù)傳入

具體代碼如下：（建議把以下代碼放入編輯器中查看，最好讓index.html執(zhí)行下，弄清楚執(zhí)行的順序）

(function(modules) { // webpackBootstrap
  // 1. 緩存模塊
  var installedModules = {};
  // 2. 定義可以在瀏覽器使用的require函數(shù)
  function __webpack_require__(moduleId) {

    // 2.1檢查模塊是否在緩存里，在的話直接返回
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 2.2 模塊不在緩存里，新建一個(gè)對(duì)象module=installModules[moduleId] {i:moduleId,l:模塊是否加載,exports:模塊返回值}
    var module = installedModules[moduleId] = {
      i: moduleId,//第一次執(zhí)行為0
      l: false,
      exports: {}
    };//第一次執(zhí)行module:{i:0,l:false,exports:{}}
    // 2.3 執(zhí)行傳入的參數(shù)中對(duì)應(yīng)id的模塊 第一次執(zhí)行數(shù)組中傳入的第一個(gè)參數(shù)
          //modules[0].call({},{i:0,l:false,exports:{}},{},__webpack_require__函數(shù))
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 2.4 將這個(gè)模塊標(biāo)記為已加載
    module.l = true;
    // 2.5 返回這個(gè)模塊的導(dǎo)出值
    return module.exports;
  }
  // 3. webpack暴露屬性 m c d n o p
  __webpack_require__.m = modules;
  __webpack_require__.c = installedModules;
  __webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, {
        configurable: false,
        enumerable: true,
        get: getter
      });
    }
  };
  __webpack_require__.n = function(module) {
    var getter = module && module.__esModule ?
      function getDefault() { return module["default"]; } :
      function getModuleExports() { return module; };
    __webpack_require__.d(getter, "a", getter);
    return getter;
  };
  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  __webpack_require__.p = "";
  // 4. 執(zhí)行reruire函數(shù)引入第一個(gè)模塊(main.js對(duì)應(yīng)的模塊)
  return __webpack_require__(__webpack_require__.s = 0);
})
([ // 0. 傳入?yún)?shù)，參數(shù)是個(gè)數(shù)組

  /* 第0個(gè)參數(shù) main.js對(duì)應(yīng)的文件*/
  (function(module, exports, __webpack_require__) {

    // 通過 CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
    const show = __webpack_require__(1);//__webpack_require__(1)返回show
    // 執(zhí)行 show 函數(shù)
    show("Webpack");

  }),
  /* 第1個(gè)參數(shù) show.js對(duì)應(yīng)的文件 */
  (function(module, exports) {

    // 操作 DOM 元素，把 content 顯示到網(wǎng)頁上
    function show(content) {
      window.document.getElementById("app").innerText = "Hello," + content;
    }
    // 通過 CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
    module.exports = show;

  })
]);

以上看上去復(fù)雜的代碼其實(shí)是一個(gè)自執(zhí)行函數(shù)(文件作為自執(zhí)行函數(shù)的參數(shù))，可以簡(jiǎn)寫如下：

(function(modules){
    //模擬require語句
    function __webpack_require__(){}
    //執(zhí)行存放所有模塊數(shù)組中的第0個(gè)模塊(main.js)
    __webpack_require_[0]
})([/*存放所有模塊的數(shù)組*/])

bundles.js能直接在瀏覽器中運(yùn)行的原因是，在輸出的文件中通過__webpack_require__函數(shù),定義了一個(gè)可以在瀏覽器中執(zhí)行的加載函數(shù)(加載文件使用ajax實(shí)現(xiàn)),來模擬Node.js中的require語句。

原來一個(gè)個(gè)獨(dú)立的模塊文件被合并到了一個(gè)多帶帶的 bundle.js 的原因在于瀏覽器不能像 Node.js 那樣快速地去本地加載一個(gè)個(gè)模塊文件，而必須通過網(wǎng)絡(luò)請(qǐng)求去加載還未得到的文件。 如果模塊數(shù)量很多，加載時(shí)間會(huì)很長(zhǎng)，因此把所有模塊都存放在了數(shù)組中，執(zhí)行一次網(wǎng)絡(luò)加載。

修改main.js,改成import引入模塊

import show from "./show";
show("Webpack");

在目錄下執(zhí)行webpack，會(huì)發(fā)現(xiàn)：

生成的代碼會(huì)有所不同，但是主要的區(qū)別是自執(zhí)行函數(shù)的參數(shù)不同，也就是2.2代碼的第二部分不同

([//自執(zhí)行函數(shù)和上面相同，參數(shù)不同
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__show__ = __webpack_require__(1);

Object(__WEBPACK_IMPORTED_MODULE_0__show__["a" /* default */])("Webpack");


}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = show;
function show(content) {
  window.document.getElementById("app").innerText = "Hello," + content;
}


})
]);

參數(shù)不同的原因是es6的import和export模塊被webpack編譯處理過了,其實(shí)作用是一樣的，接下來看一下在main.js中異步加載模塊時(shí)，bundle.js是怎樣的

main.js修改如下

import("./show").then(show=>{
    show("Webpack")
})

構(gòu)建成功后會(huì)生成兩個(gè)文件

bundle.js 執(zhí)行入口文件

0.bundle.js 異步加載文件

其中0.bundle.js文件的內(nèi)容如下：

webpackJsonp(/*在其他文件中存放的模塊的ID*/[0],[//本文件所包含的模塊
/* 0 */,
/* 1 show.js對(duì)應(yīng)的模塊 */
(function(module, __webpack_exports__, __webpack_require__) {

  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  /* harmony export (immutable) */ 
  __webpack_exports__["default"] = show;

  function show(content) {
    window.document.getElementById("app").innerText = "Hello," + content;
  }

})
]);

bundle.js文件的內(nèi)容如下：

注意：bundle.js比上面的bundle.js的區(qū)別在于：

多了一個(gè)__webpack_require__.e,用于加載被分割出去的需要異步加載的chunk對(duì)應(yīng)的文件

多了一個(gè)webpackJsonp函數(shù)，用于從異步加載的文件中安裝模塊

(function(modules) { // webpackBootstrap
    // install a JSONP callback for chunk loading
  var parentJsonpFunction = window["webpackJsonp"];
  // webpackJsonp用于從異步加載的文件中安裝模塊
  // 將webpackJsonp掛載到全局是為了方便在其他文件中調(diào)用
  /**
   * @param chunkIds 異步加載的模塊中需要安裝的模塊對(duì)應(yīng)的id
   * @param moreModules 異步加載的模塊中需要安裝模塊列表
   * @param executeModules 異步加載的模塊安裝成功后需要執(zhí)行的模塊對(duì)應(yīng)的index
   */
    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
        // add "moreModules" to the modules object,
        // then flag all "chunkIds" as loaded and fire callback
        var moduleId, chunkId, i = 0, resolves = [], result;
        for(;i < chunkIds.length; i++) {
            chunkId = chunkIds[i];
            if(installedChunks[chunkId]) {
                resolves.push(installedChunks[chunkId][0]);
            }
            installedChunks[chunkId] = 0;
        }
        for(moduleId in moreModules) {
            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
                modules[moduleId] = moreModules[moduleId];
            }
        }
        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
        while(resolves.length) {
            resolves.shift()();
        }
    };
    // The module cache
    var installedModules = {};
    // objects to store loaded and loading chunks
    var installedChunks = {
        1: 0
    };
    // The require function
    function __webpack_require__(moduleId) {
        // Check if module is in cache
        if(installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.l = true;
        // Return the exports of the module
        return module.exports;
    }
    // This file contains only the entry chunk.
  // The chunk loading function for additional chunks
  /**
   * 用于加載被分割出去的需要異步加載的chunk對(duì)應(yīng)的文件
   * @param chunkId 需要異步加載的chunk對(duì)應(yīng)的id
   * @returns {Promise}
   */
    __webpack_require__.e = function requireEnsure(chunkId) {
      var installedChunkData = installedChunks[chunkId];
      if(installedChunkData === 0) {
        return new Promise(function(resolve) { resolve(); });
      }
      // a Promise means "currently loading".
      if(installedChunkData) {
        return installedChunkData[2];
      }
      // setup Promise in chunk cache
      var promise = new Promise(function(resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject];
      });
      installedChunkData[2] = promise;
      // start chunk loading
      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.charset = "utf-8";
      script.async = true;
      script.timeout = 120000;
      if (__webpack_require__.nc) {
        script.setAttribute("nonce", __webpack_require__.nc);
      }
      script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
      var timeout = setTimeout(onScriptComplete, 120000);
      script.onerror = script.onload = onScriptComplete;
      function onScriptComplete() {
        // avoid mem leaks in IE.
        script.onerror = script.onload = null;
        clearTimeout(timeout);
        var chunk = installedChunks[chunkId];
        if(chunk !== 0) {
          if(chunk) {
            chunk[1](new Error("Loading chunk " + chunkId + " failed."));
          }
          installedChunks[chunkId] = undefined;
        }
      };
      head.appendChild(script);
      return promise;
    };
    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;
    // expose the module cache
    __webpack_require__.c = installedModules;
    // define getter function for harmony exports
    __webpack_require__.d = function(exports, name, getter) {
        if(!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                configurable: false,
                enumerable: true,
                get: getter
            });
        }
    };
    // getDefaultExport function for compatibility with non-harmony modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ?
            function getDefault() { return module["default"]; } :
            function getModuleExports() { return module; };
        __webpack_require__.d(getter, "a", getter);
        return getter;
    };
    // Object.prototype.hasOwnProperty.call
    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    // __webpack_public_path__
    __webpack_require__.p = "";
    // on error function for async loading
    __webpack_require__.oe = function(err) { console.error(err); throw err; };
    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = 0);
})
/************************************************************************/
([//存放沒有經(jīng)過異步加載的，隨著執(zhí)行入口文件加載的模塊
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 1)).then(show=>{
    show("Webpack")
})


/***/ })
]);