该文主要以实操为主，关于模块化、webpack特性等介绍可以参考webpack学习这篇，或者查看官网、其他文章，本文基于webpack 4.26.0。

什么是webpack

再提一句，webpack是一个给js打包的工具，可以将很多模块打包成静态文件，可以进行代码分割，可以使得项目在加载过程中只加载当前需要的文件，模块可以通过loader来处理各种各样的文件，不管是CommonJs、AMD、ES6都可以进行处理，还可以处理图片、CSS、JSON、CopyScript文件，或者自定义文件，例如.vue、.jsx文件都可以处理。

从零开始

安装并开始一个项目

1
2
3
4
$ mkdir webpack_demo1
$ cd webpack_demo1
$ npm init
$ npm install webpack --save-dev

npm init初始化之后将自动生成一个package.json文件，如下：
Alt text

然后，通过npm install对webpack进行安装

1
$ npm install webpack --save-dev // -D, --save-dev: Package will appear in your devDependencies

成功安装webpack之后，目录和package.json如下：
Alt text

玩一个简单的打包

打包一个js

比如，我们新建一个main.js文件，如下
Alt text

接下来，我们直接运行webpack命令

1
$ webpack main.js

输入如下，它要求我们必须安装webpack cliwebpack命令行工具，ok，我们选yes，将自动执行npm install -D webpack-cli来安装。
Alt text

而且，还继续执行了webpack main.js打包操作，可以看到一些输出信息，但是有个黄字的warning信息，要求我们指定打包模式，可以再命令行中通过--mode=devalopment/production来指定打包模式，如下
Alt text

Alt text

ok，这样就不再警告了。首先，说下输出的信息:

名称 描述
Hash 本次打包的哈希值
Version webpack版本号
Time 打包用时
Built At 打包时间
Asset 打包生成的静态文件
Chunks 分块编号
Chunk Names 块名称
Entrypoint 入口
Size 静态文件大小

表格下面的信息，就是块的说明信息。本次打包在目录下自动生成了dist目录，如下
Alt text

当我们不指定打包模式的时候，webpack默认使用production生成环境下打包，那么生成的打包文件是上面的样子，那么我们在生成环境下打包出来的文件是什么样子呢？如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/******/ (function(modules) { // webpackBootstrap
/******/    // 缓存所有模块”输出“的内容
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        /*
                 *检查缓存中是否有该模块，如果有则返回该模块的export
                 *如果没有，则执行下面的步骤：运行该模块，并将模块的”输出“放置在缓存中 
                 */
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // 创建一个新的模块
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId, // 模块的id
/******/            l: false, // 模块的”输出“是否加载到缓存中
/******/            exports: {} // 模块的”输出“
/******/        };
/******/
/******/        // 执行对应的模块，并将模块的”输出“绑定到module.exports上
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // 修改是否加载的标识
/******/        module.l = true;
/******/
/******/        // 返回模块的”输出“
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // 所有的模块
/******/    __webpack_require__.m = modules;
/******/
/******/    // 所有被缓存的模块
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // 定义一个getter方法
/******/    __webpack_require__.d = function(exports, name, getter) {
                // 如果一个对象没有name对应的属性，则在该对象上定义该属性
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/        }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/        }
/******/        Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/        if(mode & 1) value = __webpack_require__(value);
/******/        if(mode & 8) return value;
/******/        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/        var ns = Object.create(null);
/******/        __webpack_require__.r(ns);
/******/        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/        return ns;
/******/    };
/******/
/******/    // 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;
/******/    };
/******/
/******/    // 定义一个方法：判断一个对象是否有某一属性
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // 从main.js模块开始加载（执行）
/******/    return __webpack_require__(__webpack_require__.s = "./main.js");
/******/ }) // 匿名函数定义结束
/************************************************************************/
/******/ ({
/***/ "./main.js": // 起始模块
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function sayHi() {\n    alert('Hi Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./main.js?");
/***/ })
/******/ });

我们可以很清晰的看到，打包结果是一个立即执行函数表达式，其中包含webpack需要的内置函数和main.js的函数。那么，依赖的文件是怎么打包的呢？我们下面新建一个文件hello.js。

打包依赖js

Alt text

然后，在main.js里面使用CommonJS的方式引用它。

1
2
3
4
5
require('./hello.js');
function sayHi() {
    alert('Hi Hulk Lv!');
}

再次进行打包，如下
Alt text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/************************************************************************/
/******/ ({
/***/ "./hello.js":
/*!******************!*\
  !*** ./hello.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function sayHello() {\n    alert('Hello Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./hello.js?");
/***/ }),
/***/ "./main.js":
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./hello.js */ \"./hello.js\");    \n\nfunction sayHi() {\n    alert('Hi Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./main.js?");
/***/ })
/******/ });
看下打包好的文件如上图，可以看到在`main.js`部分，通过`__webpack_require__`方法去加载了`hello.js`文件。

指定打包文件名和打包路径

目前，我们打包后的文件与入口文件同名，那么如果想指定其他名字呢？我们可以使用--output-filename。
Alt text

这样在dist目录下就生成了名称为bundle.js的文件。一般打包文件都是放在根目录的dist文件夹下，如果想放在其他目录下，可以使用--output-path来设置，比如:
Alt text

再看下目录，已经在更目录的abc/文件夹下生成打包好的文件了。
Alt text

打包css

前端工程里面少不了样式文件，接下来，我们新建一个css文件，并引用它看看。
Alt text

1
2
3
4
5
6
require('./hello.js');
require('./main.css');
function sayHi() {
    alert('Hi Hulk Lv!');
}

ok，我们继续打包
Alt text

报错了！webpack提示我们需要一个适当的loader去处理css类型的文件，这里就需要css-loader了，那么我们同样使用npm install来安装。

1
$ npm install css-loader --save-dev

安装成功之后，我们继续打包
Alt text

诶？怎么还是报错。。。，我们虽然安装了css-loader，但是我们并没有告诉webpack处理css文件的时候使用css-loader，那就指定一下呗

1
2
3
4
5
6
require('./hello.js');
require('css-loader!./main.css'); // 指定相应的loader
function sayHi() {
    alert('Hi Hulk Lv!');
}

然后，我们再打包
Alt text

这时候我们打包成功了，我们看一下打包后的bundle.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/************************************************************************/
/******/ ({
/***/ "./hello.js":
/*!******************!*\
  !*** ./hello.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function sayHello() {\n    alert('Hello Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./hello.js?");
/***/ }),
/***/ "./main.js":
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./hello.js */ \"./hello.js\");\n__webpack_require__(/*! css-loader!./main.css */ \"./node_modules/css-loader/index.js!./main.css\");\n\nfunction sayHi() {\n    alert('Hi Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./main.js?");
/***/ }),
/***/ "./node_modules/css-loader/index.js!./main.css":
/*!********************************************!*\
  !*** ./node_modules/css-loader!./main.css ***!
  \********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("exports = module.exports = __webpack_require__(/*! ./node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"html, body {\\n    padding: 0;\\n    margin: 0;\\n}\\n\\nbody {\\n    background-color: red;\\n}\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./main.css?./node_modules/css-loader");
/***/ }),
/***/ "./node_modules/css-loader/lib/css-base.js":
/*!*************************************************!*\
  !*** ./node_modules/css-loader/lib/css-base.js ***!
  \*************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t//  when a module is imported multiple times with different media queries.\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n//# sourceURL=webpack:///./node_modules/css-loader/lib/css-base.js?");
/***/ })
/******/ });

可以看到，打包后的bundle.js的下面注入了css-loader和main.css相关的代码，并在main.css处理前使用css-loader来处理css。

插入css

为了验证一下，我们打包后的文件的有效性，我们新建一个index.html文件，并在里面引用打包好的js文件。
Alt text

Alt text

直接在浏览器打开index.html文件，看到js文件我们已经引入，但是样式貌似并没有生效，这是为什么呢？虽然我么使用webpack打包处理了css文件，也在js文件中引入了css文件，但以上做的只是把css文件打包进bundle.js里面，但是我们的html并没有引入样式，这里就需要提到style-loader了，同样，我们通过npm install安装一下，然后指定style-loader去处理css样式文件。

1
2
3
4
5
6
7
8
require('./hello.js');
require('style-loader!css-loader!./main.css');
function sayHi() {
    alert('Hi Hulk Lv!');
}
sayHi(); // 调用sayHi

接着，我们再打包试试
Alt text

ok，打开打包后的bundle.js看一下又增加了哪些代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/************************************************************************/
/******/ ({
/***/ "./hello.js":
/*!******************!*\
  !*** ./hello.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function sayHello() {\n    alert('Hello Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./hello.js?");
/***/ }),
/***/ "./main.js":
/*!*****************!*\
  !*** ./main.js ***!
  \*****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./hello.js */ \"./hello.js\");\n__webpack_require__(/*! style-loader!css-loader!./main.css */ \"./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./main.css\");\n\nfunction sayHi() {\n    alert('Hi Hulk Lv!');\n}\n\n//# sourceURL=webpack:///./main.js?");
/***/ }),
/***/ "./node_modules/css-loader/index.js!./main.css":
/*!********************************************!*\
  !*** ./node_modules/css-loader!./main.css ***!
  \********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("exports = module.exports = __webpack_require__(/*! ./node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \"html, body {\\n    padding: 0;\\n    margin: 0;\\n}\\n\\nbody {\\n    background-color: red;\\n}\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./main.css?./node_modules/css-loader");
/***/ }),
/***/ "./node_modules/css-loader/lib/css-base.js":
/*!*************************************************!*\
  !*** ./node_modules/css-loader/lib/css-base.js ***!
  \*************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t//  when a module is imported multiple times with different media queries.\n\t\t\t//  I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n\n\n//# sourceURL=webpack:///./node_modules/css-loader/lib/css-base.js?");
/***/ }),
/***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./main.css":
/*!************************************************************************!*\
  !*** ./node_modules/style-loader!./node_modules/css-loader!./main.css ***!
  \************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("\nvar content = __webpack_require__(/*! !./node_modules/css-loader!./main.css */ \"./node_modules/css-loader/index.js!./main.css\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ./node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack:///./main.css?./node_modules/style-loader!./node_modules/css-loader");
/***/ }),
/***/ "./node_modules/style-loader/lib/addStyles.js":
/*!****************************************************!*\
  !*** ./node_modules/style-loader/lib/addStyles.js ***!
  \****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target, parent) {\n  if (parent){\n    return parent.querySelector(target);\n  }\n  return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target, parent) {\n                // If passing function in options, then use it for resolve \"head\" element.\n                // Useful for Shadow Root style i.e\n                // {\n                //   insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n                // }\n                if (typeof target === 'function') {\n                        return target();\n                }\n                if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target, parent);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = __webpack_require__(/*! ./urls */ \"./node_modules/style-loader/lib/urls.js\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n\t// tags it will allow on a page\n\tif (!options.singleton && typeof options.singleton !== \"boolean\") options.singleton = isOldIE();\n\n\t// By default, add <style> tags to the <head> element\n        if (!options.insertInto) options.insertInto = \"head\";\n\n\t// By default, add <style> tags to the bottom of the target\n\tif (!options.insertAt) options.insertAt = \"bottom\";\n\n\tvar styles = listToStyles(list, options);\n\n\taddStylesToDom(styles, options);\n\n\treturn function update (newList) {\n\t\tvar mayRemove = [];\n\n\t\tfor (var i = 0; i < styles.length; i++) {\n\t\t\tvar item = styles[i];\n\t\t\tvar domStyle = stylesInDom[item.id];\n\n\t\t\tdomStyle.refs--;\n\t\t\tmayRemove.push(domStyle);\n\t\t}\n\n\t\tif(newList) {\n\t\t\tvar newStyles = listToStyles(newList, options);\n\t\t\taddStylesToDom(newStyles, options);\n\t\t}\n\n\t\tfor (var i = 0; i < mayRemove.length; i++) {\n\t\t\tvar domStyle = mayRemove[i];\n\n\t\t\tif(domStyle.refs === 0) {\n\t\t\t\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\n\n\t\t\t\tdelete stylesInDom[domStyle.id];\n\t\t\t}\n\t\t}\n\t};\n};\n\nfunction addStylesToDom (styles, options) {\n\tfor (var i = 0; i < styles.length; i++) {\n\t\tvar item = styles[i];\n\t\tvar domStyle = stylesInDom[item.id];\n\n\t\tif(domStyle) {\n\t\t\tdomStyle.refs++;\n\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\n\t\t\t}\n\n\t\t\tfor(; j < item.parts.length; j++) {\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\t\t} else {\n\t\t\tvar parts = [];\n\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\n\t\t}\n\t}\n}\n\nfunction listToStyles (list, options) {\n\tvar styles = [];\n\tvar newStyles = {};\n\n\tfor (var i = 0; i < list.length; i++) {\n\t\tvar item = list[i];\n\t\tvar id = options.base ? item[0] + options.base : item[0];\n\t\tvar css = item[1];\n\t\tvar media = item[2];\n\t\tvar sourceMap = item[3];\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\n\n\t\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\n\t\telse newStyles[id].parts.push(part);\n\t}\n\n\treturn styles;\n}\n\nfunction insertStyleElement (options, style) {\n\tvar target = getElement(options.insertInto)\n\n\tif (!target) {\n\t\tthrow new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");\n\t}\n\n\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\n\n\tif (options.insertAt === \"top\") {\n\t\tif (!lastStyleElementInsertedAtTop) {\n\t\t\ttarget.insertBefore(style, target.firstChild);\n\t\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\n\t\t\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\n\t\t} else {\n\t\t\ttarget.appendChild(style);\n\t\t}\n\t\tstylesInsertedAtTop.push(style);\n\t} else if (options.insertAt === \"bottom\") {\n\t\ttarget.appendChild(style);\n\t} else if (typeof options.insertAt === \"object\" && options.insertAt.before) {\n\t\tvar nextSibling = getElement(options.insertAt.before, target);\n\t\ttarget.insertBefore(style, nextSibling);\n\t} else {\n\t\tthrow new Error(\"[Style Loader]\\n\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\n Must be 'top', 'bottom', or Object.\\n (https://github.com/webpack-contrib/style-loader#insertat)\\n\");\n\t}\n}\n\nfunction removeStyleElement (style) {\n\tif (style.parentNode === null) return false;\n\tstyle.parentNode.removeChild(style);\n\n\tvar idx = stylesInsertedAtTop.indexOf(style);\n\tif(idx >= 0) {\n\t\tstylesInsertedAtTop.splice(idx, 1);\n\t}\n}\n\nfunction createStyleElement (options) {\n\tvar style = document.createElement(\"style\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\n\tif(options.attrs.nonce === undefined) {\n\t\tvar nonce = getNonce();\n\t\tif (nonce) {\n\t\t\toptions.attrs.nonce = nonce;\n\t\t}\n\t}\n\n\taddAttrs(style, options.attrs);\n\tinsertStyleElement(options, style);\n\n\treturn style;\n}\n\nfunction createLinkElement (options) {\n\tvar link = document.createElement(\"link\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\toptions.attrs.rel = \"stylesheet\";\n\n\taddAttrs(link, options.attrs);\n\tinsertStyleElement(options, link);\n\n\treturn link;\n}\n\nfunction addAttrs (el, attrs) {\n\tObject.keys(attrs).forEach(function (key) {\n\t\tel.setAttribute(key, attrs[key]);\n\t});\n}\n\nfunction getNonce() {\n\tif (false) {}\n\n\treturn __webpack_require__.nc;\n}\n\nfunction addStyle (obj, options) {\n\tvar style, update, remove, result;\n\n\t// If a transform function was defined, run it on the css\n\tif (options.transform && obj.css) {\n\t    result = typeof options.transform === 'function'\n\t\t ? options.transform(obj.css) \n\t\t : options.transform.default(obj.css);\n\n\t    if (result) {\n\t    \t// If transform returns a value, use that instead of the original css.\n\t    \t// This allows running runtime transformations on the css.\n\t    \tobj.css = result;\n\t    } else {\n\t    \t// If the transform function returns a falsy value, don't add this css.\n\t    \t// This allows conditional loading of css\n\t    \treturn function() {\n\t    \t\t// noop\n\t    \t};\n\t    }\n\t}\n\n\tif (options.singleton) {\n\t\tvar styleIndex = singletonCounter++;\n\n\t\tstyle = singleton || (singleton = createStyleElement(options));\n\n\t\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\n\t\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\n\n\t} else if (\n\t\tobj.sourceMap &&\n\t\ttypeof URL === \"function\" &&\n\t\ttypeof URL.createObjectURL === \"function\" &&\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\n\t\ttypeof Blob === \"function\" &&\n\t\ttypeof btoa === \"function\"\n\t) {\n\t\tstyle = createLinkElement(options);\n\t\tupdate = updateLink.bind(null, style, options);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\n\t\t\tif(style.href) URL.revokeObjectURL(style.href);\n\t\t};\n\t} else {\n\t\tstyle = createStyleElement(options);\n\t\tupdate = applyToTag.bind(null, style);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\t\t};\n\t}\n\n\tupdate(obj);\n\n\treturn function updateStyle (newObj) {\n\t\tif (newObj) {\n\t\t\tif (\n\t\t\t\tnewObj.css === obj.css &&\n\t\t\t\tnewObj.media === obj.media &&\n\t\t\t\tnewObj.sourceMap === obj.sourceMap\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tupdate(obj = newObj);\n\t\t} else {\n\t\t\tremove();\n\t\t}\n\t};\n}\n\nvar replaceText = (function () {\n\tvar textStore = [];\n\n\treturn function (index, replacement) {\n\t\ttextStore[index] = replacement;\n\n\t\treturn textStore.filter(Boolean).join('\\n');\n\t};\n})();\n\nfunction applyToSingletonTag (style, index, remove, obj) {\n\tvar css = remove ? \"\" : obj.css;\n\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = replaceText(index, css);\n\t} else {\n\t\tvar cssNode = document.createTextNode(css);\n\t\tvar childNodes = style.childNodes;\n\n\t\tif (childNodes[index]) style.removeChild(childNodes[index]);\n\n\t\tif (childNodes.length) {\n\t\t\tstyle.insertBefore(cssNode, childNodes[index]);\n\t\t} else {\n\t\t\tstyle.appendChild(cssNode);\n\t\t}\n\t}\n}\n\nfunction applyToTag (style, obj) {\n\tvar css = obj.css;\n\tvar media = obj.media;\n\n\tif(media) {\n\t\tstyle.setAttribute(\"media\", media)\n\t}\n\n\tif(style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\twhile(style.firstChild) {\n\t\t\tstyle.removeChild(style.firstChild);\n\t\t}\n\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n}\n\nfunction updateLink (link, options, obj) {\n\tvar css = obj.css;\n\tvar sourceMap = obj.sourceMap;\n\n\t/*\n\t\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\n\t\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\n\t\ton by default.  Otherwise default to the convertToAbsoluteUrls option\n\t\tdirectly\n\t*/\n\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\n\n\tif (options.convertToAbsoluteUrls || autoFixUrls) {\n\t\tcss = fixUrls(css);\n\t}\n\n\tif (sourceMap) {\n\t\t// http://stackoverflow.com/a/26603875\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\n\t}\n\n\tvar blob = new Blob([css], { type: \"text/css\" });\n\n\tvar oldSrc = link.href;\n\n\tlink.href = URL.createObjectURL(blob);\n\n\tif(oldSrc) URL.revokeObjectURL(oldSrc);\n}\n\n\n//# sourceURL=webpack:///./node_modules/style-loader/lib/addStyles.js?");
/***/ }),
/***/ "./node_modules/style-loader/lib/urls.js":
/*!***********************************************!*\
  !*** ./node_modules/style-loader/lib/urls.js ***!
  \***********************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("\n/**\n * When source maps are enabled, `style-loader` uses a link element with a data-uri to\n * embed the css on the page. This breaks all relative urls because now they are relative to a\n * bundle instead of the current page.\n *\n * One solution is to only use full urls, but that may be impossible.\n *\n * Instead, this function \"fixes\" the relative urls to be absolute according to the current page location.\n *\n * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.\n *\n */\n\nmodule.exports = function (css) {\n  // get current location\n  var location = typeof window !== \"undefined\" && window.location;\n\n  if (!location) {\n    throw new Error(\"fixUrls requires window.location\");\n  }\n\n\t// blank or null?\n\tif (!css || typeof css !== \"string\") {\n\t  return css;\n  }\n\n  var baseUrl = location.protocol + \"//\" + location.host;\n  var currentDir = baseUrl + location.pathname.replace(/\\/[^\\/]*$/, \"/\");\n\n\t// convert each url(...)\n\t/*\n\tThis regular expression is just a way to recursively match brackets within\n\ta string.\n\n\t /url\\s*\\(  = Match on the word \"url\" with any whitespace after it and then a parens\n\t   (  = Start a capturing group\n\t     (?:  = Start a non-capturing group\n\t         [^)(]  = Match anything that isn't a parentheses\n\t         |  = OR\n\t         \\(  = Match a start parentheses\n\t             (?:  = Start another non-capturing groups\n\t                 [^)(]+  = Match anything that isn't a parentheses\n\t                 |  = OR\n\t                 \\(  = Match a start parentheses\n\t                     [^)(]*  = Match anything that isn't a parentheses\n\t                 \\)  = Match a end parentheses\n\t             )  = End Group\n              *\\) = Match anything and then a close parens\n          )  = Close non-capturing group\n          *  = Match anything\n       )  = Close capturing group\n\t \\)  = Match a close parens\n\n\t /gi  = Get all matches, not the first.  Be case insensitive.\n\t */\n\tvar fixedCss = css.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi, function(fullMatch, origUrl) {\n\t\t// strip quotes (if they exist)\n\t\tvar unquotedOrigUrl = origUrl\n\t\t\t.trim()\n\t\t\t.replace(/^\"(.*)\"$/, function(o, $1){ return $1; })\n\t\t\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\n\n\t\t// already a full url? no change\n\t\tif (/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/|\\s*$)/i.test(unquotedOrigUrl)) {\n\t\t  return fullMatch;\n\t\t}\n\n\t\t// convert the url to a full url\n\t\tvar newUrl;\n\n\t\tif (unquotedOrigUrl.indexOf(\"//\") === 0) {\n\t\t  \t//TODO: should we add protocol?\n\t\t\tnewUrl = unquotedOrigUrl;\n\t\t} else if (unquotedOrigUrl.indexOf(\"/\") === 0) {\n\t\t\t// path should be relative to the base url\n\t\t\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\n\t\t} else {\n\t\t\t// path should be relative to current directory\n\t\t\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\.\\//, \"\"); // Strip leading './'\n\t\t}\n\n\t\t// send back the fixed url(...)\n\t\treturn \"url(\" + JSON.stringify(newUrl) + \")\";\n\t});\n\n\t// send back the fixed css\n\treturn fixedCss;\n};\n\n\n//# sourceURL=webpack:///./node_modules/style-loader/lib/urls.js?");
/***/ })
/******/ });

然后，我们再次打开index.html验证一下
Alt text

Alt text

ok，我们看到css样式已经生效了，在index.html文件里面，添加了<style>标签，并将css样式注入到<style>标签里面。

css-loader主要是来处理css样式文件，style-loader是在css-loader处理之后新建一个<style>标签插入到html文件里面，当html引入了bundle.js文件之后，插入<style>标签的代码就会被执行。
那每次引入css文件的时候都要去加入一长串的loader吗？其实我们可以通过命令行工具来指定，要使用--module-bind参数，像这样。
Alt text

介绍一些命令行参数

  • –watch：观察文件系统的变化，这样每次修改以后都不需要再手动执行打包命令，会自动打包
  • –progress：打印出编译进度的百分比值，默认false
  • –display-modules：在输出中显示所有模块，包括被排除的模块
  • –display-chunk：在输出中显示 chunks
  • –display-reasons：显示模块包含在输出中的原因

Alt text

配置文件玩打包

建立项目的配置文件

在上一节，主要写了一个简单的例子走了一下打包的过程，下面我们规范一下工程目录结构，并通过webpack.config.js配置文件来让webpack为我们的工程打包。我们新建一个工程目录webpack_test，目录结构如下。

Alt text

webpack.config.js配置如图所示，src放源码，script放脚本文件，style放样式文件

main.js内容如下：

1
2
3
function hello(str) {
    alert(str);
}

style.css内容如下：

1
2
3
4
5
6
7
8
html, body {
    padding: 0;
    margin: 0;
}
body {
    background-color: red;
}

index.html内容如下：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>webpack test</title>
</head>
<body>
    <script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>

ok，文件都准备好以后，我们直接运行命令webpack来打包。

Alt text

从错误信息中，我们得知输出路径必须是一个绝对路径，但是在配置里面手写绝对路径太麻烦了，怎么办呢？我们可以使用Node.js提供的__dirname，Node.js 中，__dirname总是指向被执行js文件的绝对路径，相反，./会返回你执行node命令的路径，例如你的工作路径。有一个特殊情况是在 require()中使用./时，这时的路径就会是含有require()的脚本文件的相对路径。因此，我们修改webpack.config.js如下

1
2
3
4
5
6
7
8
module.exports = {
    mode: 'development', // 打包模式
    entry: './src/script/main.js', // 入口
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        filename: 'bundle.js' // 输出文件名
    }
}

然后，我们再次执行webpack命令
Alt text

ok，打包成功了。在根目录dist/js/下可以看到打包好的js文件bundle.js。在上面引用的配置文件叫做webpack.config.js，这个是webpack默认的配置文件名，其实我们也可以使用其他名字，比如webpack.config.dev.js，然后在命令行打包的时候添加--config参数，像下面这样：

1
$ webpack --config webpack.config.dev.js

嗯，这样就可以通过别的配置文件来打包我们的程序了，但看起来还是有点麻烦，我们可以结合npm的脚本来做到的，打开package.json文件，添加script脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons" 
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xiaojiaolv131/webpack_test.git"
  },
  "author": "hulk lv",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/xiaojiaolv131/webpack_test/issues"
  },
  "homepage": "https://github.com/xiaojiaolv131/webpack_test#readme",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2"
  }
}

接着，我们运行npm run webpack命令来打包
Alt text

配置打包入口和输出

上面讲的都是单入口的打包，那么多入口怎么配置呢？可以在配置文件中通过数组的形式，例如两个平行的不相依赖的文件，但想打包在一起的情况。
例如，我们新建一个新的a.js，并在入口配置它。

1
2
3
function a() {
    alert('a');
}

多入口webpack.config.js

1
2
3
4
5
6
7
8
module.exports = {
    mode: 'development', // 打包模式
    entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        filename: 'bundle.js' // 输出文件名
    }
}

这时候，我们打包
Alt text

ok，打包成功了，看下打包之后的bundle.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/************************************************************************/
/******/ ({
/***/ "./src/script/a.js":
/*!*************************!*\
  !*** ./src/script/a.js ***!
  \*************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function a() {\n    alert('a');\n}\n\n//# sourceURL=webpack:///./src/script/a.js?");
/***/ }),
/***/ "./src/script/main.js":
/*!****************************!*\
  !*** ./src/script/main.js ***!
  \****************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("function hello(str) {\n    alert(str);\n}\n\n//# sourceURL=webpack:///./src/script/main.js?");
/***/ }),
/***/ 0:
/*!****************************************************!*\
  !*** multi ./src/script/main.js ./src/script/a.js ***!
  \****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("__webpack_require__(/*! ./src/script/main.js */\"./src/script/main.js\");\nmodule.exports = __webpack_require__(/*! ./src/script/a.js */\"./src/script/a.js\");\n\n\n//# sourceURL=webpack:///multi_./src/script/main.js_./src/script/a.js?");
/***/ })
/******/ });

可以看到，main.js和a.js都被打包到bundle.js里面了。
还有一种多入口的方式，是配置入口对象的方式，这种更适合多页面的应用程序的打包，像这样。

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        filename: 'bundle.js' // 输出文件名
    }
}

然后，我们再次打包看下

Alt text

打包提示错误，错误中提示我们多个单独的chunk打包到了同一个文件bundle.js里面了。怎么办呢？在配置文件里面，应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        filename: '[name].js' // 输出文件名
    }
}

再打包看看
Alt text

OK，打包成功了，在dist/js/目录下生成了main.js和a.js入口同名文件，文件中分别包含了webpack内部函数和入口对应的代码。对于filename的设置，我们出了使用name占位符，还可以使用hash、chunkhash等来设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    }
}

Alt text

hash是本次打包的哈希值，chunkhash是每个chunk生成的哈希值。

自动化生产项目中的html页面

当我们通过占位符来设置输入的文件名的时候，我们又不知道打包好的js文件名称，如何在html引入呢？可以借助webpack的插件来解决这个问题，引入html-webpack-plugin，同样通过npm install进行安装。然后在配置文件webpack.config.js中建立对插件的引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    },
    plugins: [
        new htmlWebpackPlugin()
    ]
}

配置好plugins之后，再次打包，可以在dist/js目录中看到新生成的html文件

Alt text

惊不惊喜！？html-webpack-plugin插件已经帮我们自动生成一个引用了打包后的js的html文件。但是这样的html还不能满足实际中的复杂结构，自定义的需求更大，而且自动生成的index.html没有和我们根目录下的index.html建立任何联系。其实，我们可以给html-webpack-plugin插件在初始化的时候穿参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html' // 模版，这里直接用根目录下的index.html
        })
    ]
}

立即打包看看结果
Alt text

在自动生成的index.html里面，出了自动引入的两个js之外，还包含模版里面的js的引用，所以可以将模版里面的js引用干掉了。还有一个问题，目前所有文件的输出都在dist/js/目录下，这个如何解决呢？去改改输出配置就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html' // 模版，这里直接用根目录下的index.html
        })
    ]
}

Alt text

html-webpack-plugin插件除了可以指定模版，还可以指定文件名，文件名中同输出配置可以使用占位符；甚至可以通过injuct参数指定脚本引入的标签是放在head还是body

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 模版，这里直接用根目录下的index.html
            // filename: 'index-[hash].html', // 输出文件名
            inject: 'head',
            title: 'Hulk Lv Blog'
        })
    ]
}

下面说一下更复杂的需求，要求给模版传参，并引用，比如在index.html中引用title。

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

运行一下打包，可以看下生成的’index.html’

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>Hulk Lv Blog</title>
    <script type="text/javascript" src="js/main.c250d5e450733548d6bd.js"></script>
    <script type="text/javascript" src="js/a.fedd8d1ee538e61394d4.js"></script></head>
<body>
</body>
</html>

上面是使用了模版语法，当然还可以在里面使用for循环等语句来实现需求，只需要在<%%>里面书写js语句代码就可以。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>

再次打包

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>Hulk Lv Blog</title>
    <script type="text/javascript src="js/main.c250d5e450733548d6bd.js"></script>
    <script type="text/javascript" src="js/main.c250d5e450733548d6bd.js"></script>
    <script type="text/javascript" src="js/a.fedd8d1ee538e61394d4.js"></script></head>
<body>
    <script type="text/javascript src="js/a.fedd8d1ee538e61394d4.js"></script>
</body>
</html>

这下我们模版里面指定的js已经被引入，但是因为之前设置了inject: head，因此<head>标签里面还有自动生成的引用，那么我们直接设置inject为false就可以干掉多余的了，生成如下

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Hulk Lv Blog</title>
    <script type="text/javascript src="js/main.c250d5e450733548d6bd.js"></script>
</head>
<body>
    <script type="text/javascript src="js/a.fedd8d1ee538e61394d4.js"></script>
</body>
</html>

解决完上面的问题之后，在实际开发中，上线后引用的脚本地址一般和开发时候不一样怎么办？下面说下output的publicPath属性。
对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。
此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或 标签）解析。相对于服务的 URL(Server-relative URL)，相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL)也可是可能用到的，或者有时必须用到，例如：当将资源托管到 CDN 时。
该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。默认值是一个空字符串 “”。简单规则如下：output.path 中的 URL 以 HTML 页面为基准。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist/js", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: '[name].[chunkhash].js' // 输出文件名
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 模版，这里直接用根目录下的index.html
            // filename: 'index-[hash].html', // 输出文件名
            inject: 'head',
            title: 'Hulk Lv Blog'
        })
    ]
}
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Hulk Lv Blog</title>
    <script type="text/javascript src="https://cdn.com/js/main.2f1c1d515dca0083dca6.js"></script>
</head>
<body>
    <script type="text/javascript src="https://cdn.com/js/a.013c249b581217752fa4.js"></script>
</body>
</html>

另外，还可以通过html-webpack-plugin插件的minify属性对index.html进行压缩。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!--<script type="text/javascript src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>-->
</head>
<body>
    <!--<script type="text/javascript src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>-->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: 'js/[name].[chunkhash].js', // 输出文件名
        publicPath: 'https://cdn.com/'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 模版，这里直接用根目录下的index.html
            // filename: 'index-[hash].html', // 输出文件名
            inject: 'head',
            // inject: false,
            title: 'Hulk Lv Blog',
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        })
    ]
}

经过上面的配置，打包看看

1
<!DOCTYPE html><html><head><title>Hulk Lv Blog</title><script type="text/javascript" src="https://cdn.com/js/main.2f1c1d515dca0083dca6.js"></script><script type="text/javascript" src="https://cdn.com/js/a.013c249b581217752fa4.js"></script></head><body></body></html>

自动化生产项目中的多html页面

只需要在plugins中配置多个html-webpack-plugin就可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // 打包模式
    // entry: ['./src/script/main.js', './src/script/a.js'], // 入口
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: { // 输出配置
        path: __dirname + "/dist", // 输出路径
        // filename: '[name].[hash].js' // 输出文件名
        filename: 'js/[name].[chunkhash].js', // 输出文件名
        publicPath: 'https://cdn.com/'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html', // 模版，这里直接用根目录下的index.html
            // filename: 'index-[hash].html', // 输出文件名
            filename: 'index.html', // 输出文件名
            inject: 'head',
            // inject: false,
            title: 'Hulk Lv Blog',
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new htmlWebpackPlugin({
            template: 'index.html', // 模版，这里直接用根目录下的index.html
            filename: 'a.html', // 输出文件名
            // filename: 'index-[hash].html', // 输出文件名
            inject: 'head',
            // inject: false,
            title: 'this is a page'
        })
    ]
}

ok，打包看看生成的是什么
Alt text

在输出目录里面生成了两个chunk对应的html文件，都是以index.html为模版，那么如何做到定制化呢，可以通过html-webpack-plugin传参数chunks，在模版中定制不同chunk的不同引用等。

未完待续