webpack 入门与解析-白红宇

每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。 webpack是基于node的。先安装最新的。

1.初始化

安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。

npm init -y

这个命令会创建一个默认的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 是，表示指定默认输出。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的

`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提供的一个变量。这个具体后面再看。而会生成一个默认的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 得到同样的结果

image

出现helloword。再看下文件内容

index.html:

```<``html``>``<``head``>``<``meta` `charset``=``"UTF-8"``>``<``title``>Webpack demo
    ``
    ``<``body``>``<``script` `type``=``"text/javascript"` `src``=``"app.js"``>
    
    ``
    `复制代码

默认引用了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的功能和部分原理，但略显复杂，且没有感受到有多大的好处。继续探索