共计 7342 个字符，预计需要花费 19 分钟才能阅读完成。
每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。webpack 是基于 node 的。先安装最新的 node。
1. 初始化
安装 node 后，新建一个目录，比如 html5。cmd 中切到当前文件夹。
npm init -y
这个命令会创建一个默认的 package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：https://docs.npmjs.com/files/package.json。
不要 y 参数的话，会在命令框中设置各项参数，但觉得没啥必要。
2. 安装 webpack
`npm` `install` `webpack –save-dev`
将 webpack 安装到当前目录。虽然 npm install webpack -g 可以讲 webpack 安装到全局，但是容易出现一些模块找不到的错误，所以最好还是安装到当前目录下。
3. 目录结构
webpack 是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构：
app 包含的开发中的 js 文件，一个组件，一个入口。build 中就是用来存放打包之后的文件的。webpack.config.js 顾名思义用来配置 webpack 的。package.json 就不用说了。
component.js
`export` `default` `function` `() {`
`var` `element = document.createElement(“’h1’“);`
`element.innerHTML =` `’Hello world’“;`
`return` `element;`
`}`
component.js 是输出一个内容为 h1 元素。export default 是 ES6 语法，表示指定默认输出。import 的时候不用带大括号。
index.js
`import component from` `’./component’“;`
`document.body.appendChild(component());`
index.js 的作用就是引用 Component 模块，并在页面上输出一个 h1 元素。但完成这个还需要一个插件，因为目前我们还没有 index.html 文件。
`npm` `install` `html-webpack-plugin –save-dev`
html-webpack-plugin 的用来生成 html，将其也安装到开发目录下面。
4. 设置 webpack 配置文件
我们需要通过 webpack.config.js 文件告诉 webpack 如何开始。配置文件至少需要一个入口和一个输出。多个页面就需要多个入口。node 的 path 模块
`const path = require(“’path’“);`
`const HtmlWebpackPlugin = require(“’html-webpack-plugin’“);`
`const PATHS = {`
`app: path.join(__dirname,` `’app’“),`
`build: path.join(__dirname,` `’build’“),`
`};`
`module.exports = {`
`entry: {`
`app: PATHS.app,`
`},`
`output: {`
`path: PATHS.build,`
`filename:` `'[name].js’“,`
`},`
`plugins: [`
`new` `HtmlWebpackPlugin({`
`title:` `’Webpack demo’“,`
`}),`
`],`
`};`
第一次看到这个配置文件是有点懵，主要是 exports，分三个部分，一个入口，一个输出，一个插件。入口指向了 app 文件夹。默认会把包含 ”index.js” 的文件作为入口。输出指定了 build 地址和一个文件名；[name]这儿表示占位符，可以看成 webpack 提供的一个变量。这个具体后面再看。而 HtmlWebpackPlugin 会生成一个默认的 html 文件。
5. 打包
有了以上准备，直接输入 webpack 就能运行了。
这个输出包含了 Hash(每次打包值都不同),Version,Time(耗时)。以及输出的文件信息。这时打开 build 文件夹，发现多了一个 app.js 和 index.html 文件，双击 index.html：
也可以修改下 package.json
?
`{`
`”name”“:` `”Html5″“,`
`”version”“:` `”1.0.0″“,`
`”description”“:` `””“,`
`”main”“:` `”index.js”“,`
`”scripts”“: {`
`”build”“:` `”webpack”`
`},`
`”keywords”“: [],`
`”author”“:` `””“,`
`”license”“:` `”ISC”“,`
`”devDependencies”“: {`
`”html-webpack-plugin”“:` `”^2.28.0″“,`
`”webpack”“:` `”^2.2.1″`
`}`
`}`
指定 build。在 cmd 中执行 npm run build 得到同样的结果
出现 helloword。再看下文件内容
index.html:
`<!DOCTYPE html>`
`<“html“>`
`<“head“>`
`<“meta` `charset“=“”UTF-8″“>`
`<“title“>Webpack demo</“title“>`
`</“head“>`
`<“body“>`
`<“script` `type“=“”text/javascript”` `src“=“”app.js”“></“script“></“body“>`
`</“html“>`
默认引用了 app.js。
6、解析
app.js
`/******/` `(“function“(modules) {` `// webpackBootstrap`
`/******/` `// The module cache`
`/******/` `var` `installedModules = {};`
`/******/` `// 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;`
`/******/` `}`
`/******/` `// expose the modules object (__webpack_modules__)`
`/******/` `__webpack_require__.m = modules;`
`/******/` `// expose the module cache`
`/******/` `__webpack_require__.c = installedModules;`
`/******/` `// identity function for calling harmony imports with the correct context`
`/******/` `__webpack_require__.i =` `function“(value) {` `return` `value;};`
`/******/` `// 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 =` `””“;`
`/******/` `// Load entry module and return exports`
`/******/` `return` `__webpack_require__(__webpack_require__.s = 1);`
`/******/` `})`
`/************************************************************************/`
`/******/` `([`
`/* 0 */`
`/***/` `(“function“(module, __webpack_exports__, __webpack_require__) {`
`”use strict”“;`
`/* harmony default export */` `__webpack_exports__[“”a”“] =` `function` `() {`
`var` `element = document.createElement(“’h1’“);`
`element.innerHTML =` `’Hello world’“;`
`return` `element;
`};`
`/***/` `}),`
`/* 1 */`
`/***/` `(“function“(module, __webpack_exports__, __webpack_require__) {`
`”use strict”“;`
`Object.defineProperty(__webpack_exports__,` `”__esModule”“, { value:` `true` `});`
`/* harmony import */` `var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
`document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__[“”a”` `/* default */“])());`
`/***/` `})`
`/******/` `]);`
而 app.js 内容比较多了。整体是一个匿名函数。
`(“function“(module) {`
`})([(“function` `(){}),` `function“() {}])`
app 文件夹中的两个 js 文件成了这儿的两个模块。函数最开始是从__webpack_require__开始
`return` `__webpack_require__(__webpack_require__.s = 1);`
这里指定从模块 1 执行(赋值语句的返回值为其值)。而模块 1 的调用是通过__webpack_require__的这句执行的。
<u> 复制代码 </u> 代码如下:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
通过 call 调用模块的主要作用是为了把参数传过去。
`(“function“(module, __webpack_exports__, __webpack_require__) {`
`”use strict”“;`
`Object.defineProperty(__webpack_exports__,` `”__esModule”“, { value:` `true` `});`
`/* harmony import */` `var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
`document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__[“”a”` `/* default */“])());`
`/***/` `})`
webpack_require 每加载一个模块都会先去模块缓存中找，没有就新建一个 module 对象：
`var` `module = installedModules[moduleId] = {`
`i: moduleId,`
`l:` `false“,`
`exports: {}`
`};`
模块 1 中加载了模块 0，
`var` `__WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);`
WEBPACK_IMPORTED_MODULE_0__component 返回的是这个模块 0 的 exports 部分。而之前 Component.js 的默认方法定义成了
`__webpack_exports__[“”a”“] =` `function` `() {`
`var` `element = document.createElement(“’h1’“);`
`element.innerHTML =` `’Hello world’“;`
`return` `element;`
`}`
所以再模块 1 的定义通过 ”a“来获取这个方法：
<u> 复制代码 </u> 代码如下:
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__[“a” /* default */])());
这样就完整了，但这里使用了__webpack_require__.i 将原值返回。
`/******/` `// identity function for calling harmony imports with the correct context`
`/******/` `__webpack_require__.i =` `function“(value) {` `return` `value;};`
不太明白这个 i 函数有什么作用。这个注释也不太明白，路过的大神希望可以指点下。
小结：
webpack 通过一个立即执行的匿名函数将各个开发模块作为参数初始化，每个 js 文件 (module) 对应一个编号，每个 js 中 export 的方法或者对象有各自指定的关键字。通过这种方式将所有的模块和接口方法管理起来。然后先加载最后的一个模块(应该是引用别的模块的模块)，这样进而去触发别的模块的加载，使整个 js 运行起来。到这基本了解了 webpack 的功能和部分原理，但略显复杂，且没有感受到有多大的好处。继续探索。
