预先准备
安装node.js：项目开始之前，确保安装了nodejs工具。原则上，你应使用最新的稳定版本（LTS），点击LTS的下载按钮即可。
开发工具：Sublime Text 3，Visual Studio Code， Atom，Hbuilder。选择任意一款工具即可，你也可以使用普通的文本编辑器。
实验环境：
| 序号 |
名称 |
说明 |
| 1 |
操作系统 |
Window 10 |
| 2 |
nodejs版本 |
10.15.3 LTS |
| 3 |
开发工具 |
Hbuilder |
概念简析
webpack是一个JavaScript应用程序的静态模块打包工具，其工作时，html、js、css、image、font等文件被视为资源，每个资源文件被视为一个模块，webpack根据各模块之间的直接或间接依赖关系构建出一个依赖图，最后根据依赖图进行项目文件的打包。
webpack的核心概念有entry、output、loader、plugin、mode等，这些概念的简要说明如下表：
| 名称 |
解释 |
说明 |
| entry |
入口 |
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出与入口起点有直接或间接依赖关系的所有模块（库）。 |
| output |
输出 |
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。 |
| loader |
加载器 |
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。 |
| plugin |
插件 |
loader 用于转换某些类型的模块，而plugin可以用于执行范围更广的任务，包括：打包优化，资源管理，注入环境变量。 |
| mode |
模式 |
设置mode参数，以启用webpack在相应环境下的优化处理。其中，参数值为development、production或none。 |
你可以通过配置文件webpack.config.js来配置所有的参数。配置文件实例：
webpack.config.js1
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
| const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'src');
const DIST_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports = {
optimization: {
},
entry: {
},
output: {
},
mode: 'development',
module: {
},
plugins: [
],
devServer: {
contentBase: DIST_PATH,
historyApiFallback: true,
hot: true,
inline: true
}
};
|
安装webpack
新建一个项目目录，进入该目录，初始化npm。在本地安装webpack（即在该目录下安装，删除该目录后，安装的webpack便不再存在），安装webpack-cli：
1
2
3
4
| mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
|
安装依赖
安装生产环境依赖
1
| npm install jquery --save
|
安装开发环境依赖
1
| npm install webpack-dev-server --save-dev
|
安装一个 package时，若此 package 要打包到生产环境 bundle 中，你应该使用 npm install --save。若此 package 只用于开发环境中时（例如linter、 测试等开发过程），你应该使用 npm install --save-dev。
| 依赖 |
说明 |
| jquery |
提供jquery函数库 |
| webpack-dev-server |
提供web server，提供 live reloading(实时重新加载) 功能，包括自动刷新浏览器页面。 |
此时的package.json，及各依赖的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| {
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"jquery": "^3.4.0"
}
}
|
完善项目目录
在webpack-demo 目录下新建dist、src目录，webpack.config.js等文件
1
2
3
4
5
6
| webpack-demo
dist
index.html
src
index.js
webpack.config.js
|
新建文件index.html
1
2
3
4
5
6
7
8
9
| <!doctype html>
<html>
<head>
<title>webpack-demo</title>
</head>
<body>
<script src="app.bundle.js"></script>
</body>
</html>
|
新建文件index.js
1
2
| import $ from 'jquery';
$('body').append('Hello webpack-demo!');
|
新建文件webpack.config.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
| const path = require('path');
const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'src');
const DIST_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports = {
optimization: {
concatenateModules: false
},
entry: {
app: SRC_PATH + '/index.js',
},
output: {
path: DIST_PATH,
filename: '[name].bundle.js'
},
mode: 'development',
devServer: {
contentBase: DIST_PATH,
port: 9800,
host: "localhost",
historyApiFallback: true,
hot: true,
inline: true
}
};
|
添加npm自定义命令
打开package.json文件，修改scripts部分
1
2
3
4
5
6
| "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server",
"build": "webpack"
},
|
之后，你可以使用以下命令
1
2
3
4
| npm run test
npm run start
npm run dev
npm run build
|
运行项目
启动实时服务器dev-server
此时命令行窗口的输出应该如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $ npm run dev
> webpack-demo@1.0.0 dev C:\Users\水煮鱼肠面\Desktop\webpack-demo
> webpack-dev-server
i ｢wds｣: Project is running at http://localhost:9800/
......
Built at: 2019-04-13 23:14:57
Asset Size Chunks Chunk Names
app.bundle.js 687 KiB app [emitted] app
Entrypoint app = app.bundle.js
......
+ 14 hidden modules
i ｢wdm｣: Compiled successfully.
|
你应该关注此条输出
1
| + i ｢wds｣: Project is running at http://localhost:9800/
|
在浏览器中打开localhost:9800，你应该看到Hello webpack-demo!
测试实时服务器dev-server
修改index.js
1
2
3
4
| import $ from 'jquery';
$('body').append('Hello webpack-demo!');
$('body').append('<br/>');
$('body').append('Test dev-server!');
|
保存后，浏览器内的页面将自动刷新！
打包项目文件
此时打开dist目录，你将发现index.html中引用的app.bundle.js并不存在！其实未编译打包项目前，app.bundle.js只存在于dev-server的内存中。
运行命令，打包项目
此时命令行窗口的输出应该如下，dist目录下将生成app.bundle.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $ npm run build
> webpack-demo@1.0.0 build C:\Users\水煮鱼肠面\Desktop\webpack-demo
> webpack
Hash: a2dd1fb50e1fd723cb1c
Version: webpack 4.30.0
Time: 986ms
Built at: 2019-04-13 23:57:05
Asset Size Chunks Chunk Names
app.bundle.js 314 KiB app [emitted] app
Entrypoint app = app.bundle.js
[./src/index.js] 132 bytes {app} [built]
+ 1 hidden module
|
问题记录
| 序号 |
问题 |
解决方法 |
| 1 |
启动实时服务器dev-server，并打开localhost:9800/页面，浏览器页面空白。再打开浏览器console，将发现错误提示： Uncaught TypeError: Cannot read property 'call' of undefined |
安装最新版本的webpack(>=4.30.0） |
| 2 |
安装依赖的过程中报错 |
检查网络状况、检查命令是否正确…… |
问题1的项目issue8996
