1. 运行环境

---

• Node.js
• Visual Studio Code

2. Webpack

---

Webpack 是前端资源加载/打包的工具，是 基于 Node.js 的第三方模块，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的 静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少页面的请求。

3. 使用 Webpack 进行打包

---

项目结构：

|—— dist 存储打包后的 js 文件
|—— src 存储资源文件
      |—— common.js 测试文件1
      |—— utils.js  测试文件2
      |—— main.js	  测试文件3, 该文件会引入 1 和 2
      |—— index.html 用于测试打包后JS文件的效果
      
|—— webpack.config.js 配置 webpack 打包  
1
2
3
4
5
6
7
8

3.1 安装 Webpack

第一步，使用 node 的命令全局安装 webpack

npm install --location=global webpack webpack-cli
1

安装后使用webpack命令查看版本号

webpack -v
1

3.2 准备JS文件

common.js

exports.info = function(str){
    document.write(str) // 浏览器输出
}
1
2
3

utils.js

exports.add = function(a, b){
    return a + b
}
1
2
3

main.js

const common = require('./common')
const utils = require('./utils')

common.info('Hello World!' + utils.add(1, 2)) 
1
2
3
4

3.3 编写配置文件

webpack 目录下创建配置文件 webpack.config.js

const path = require('path')                        // Node 内置模块

module.exports = {  
    entry: './src/main.js',                         // 配置的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),    // 输出路径, __dirname: 当前文件所在路径
        filename: 'bundle.js'                       // 输出文件
    }
}
1
2
3
4
5
6
7
8
9

3.4 执行命令

webpack 支持两种打包方式，分别是 开发环境和生产环境的打包

1. 开发环境打包

webpack --mode=development
1

打包后的结果（默认压缩全部到第一行）：
dist/ bundle.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/common.js":
/*!***********************!*\
  !*** ./src/common.js ***!
  \***********************/
/***/ (() => {

eval("expors.info = function(str){\r\n    document.write(str) // 浏览器输出\r\n}\n\n//# sourceURL=webpack:///./src/common.js?");

/***/ }),

/***/ "./src/main.js":
/*!*********************!*\
  !*** ./src/main.js ***!
  \*********************/
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

eval("const common = __webpack_require__(/*! ./common */ \"./src/common.js\")\r\nconst utils = __webpack_require__(/*! ./utils */ \"./src/utils.js\")\r\n\r\ncommon.info('Hello World!' + utils.add(1, 2)) \n\n//# sourceURL=webpack:///./src/main.js?");

/***/ }),

/***/ "./src/utils.js":
/*!**********************!*\
  !*** ./src/utils.js ***!
  \**********************/
/***/ ((__unused_webpack_module, exports) => {

eval("exports.add = function(a, b){\r\n    return a + b\r\n}\n\n//# sourceURL=webpack:///./src/utils.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/main.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

2. 生产环境打包

生产环境会将代码全部压缩到第一行

webpack --mode=production
1

打包的结果：dist / bundle.js

(()=>{var r={648:()=>{expors.info=function(r){document.write(r)}},555:(r,o)=>{o.add=function(r,o){return r+o}}},o={};function n(t){var e=o[t];if(void 0!==e)return e.exports;var i=o[t]={exports:{}};return r[t](i,i.exports,n),i.exports}(()=>{const r=n(648),o=n(555);r.info("Hello World!"+o.add(1,2))})()})();
1

最后是测试打包后的 js 效果，直接打开 index.html ，成功的效果为页面上显示了：

Hello World!3
1

3.5 设置支持打包 CSS 代码

之前主要是打包 JS 文件，然而实际场景中，CSS 代码也是需要打包的，在这里先安装一个支持 CSS 打包的 Node 第三方模块：

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

配置 webpack.config.js

const path = require('path')                        // Node 内置模块

module.exports = {  
    entry: './src/main.js',                         // 配置的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),    // 输出路径, __dirname: 当前文件所在路径
        filename: 'bundle.js'                       // 输出文件
    },
    module: {
      rules: [
        {
          test: /\.css$/,							
          use: ['style-loader', 'css-loader']
        }
    ]}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

JS 代码里引入 CSS 代码也是通过require，例如：

require('xxx.css')
1

打包的命令依然采用 webpack

# 开发环境打包
webpack --mode=development
# 生产环境打包
webpack --mode=production
1
2
3
4