一、WebPack
WebPack 是前端资源模块工具：WebPack能够分析项目结构，找到 JavaScript 模块，将多个依赖模块打包成一个模块。
二、准备
1.初始化项目
使用 npm init -y 命令，项目根目录下会生成 package.json 文件
npm init -y2.安装 WebPack
安装 webpack 和 webpack-cli：
npm install --save-dev webpack webpack-cli查看版本：
zxm@zxm-pc:~/IdeaProjects/webpack-test$ npm list webpack webpack-cli
webpack-test@1.0.0 /home/zxm/IdeaProjects/webpack-test
├─┬ webpack-cli@5.1.4
│ ├─┬ @webpack-cli/configtest@2.1.1
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ ├─┬ @webpack-cli/info@2.0.2
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ ├─┬ @webpack-cli/serve@2.0.5
│ │ ├── webpack-cli@5.1.4 deduped
│ │ └── webpack@5.91.0 deduped
│ └── webpack@5.91.0 deduped
└─┬ webpack@5.91.0
└─┬ terser-webpack-plugin@5.3.10
└── webpack@5.91.0 deduped三、编写模块
1.目录结构：
新建两个文件夹 app 和 public，app 存放编写的 JavaScript 模块，public 存放 index.html 页面和 app 打包的 JavaScript 文件 bundle.js
zxm@zxm-pc:~/IdeaProjects$ tree webpack-test/
webpack-test/
├── app
│ ├── greeter.js
│ └── main.js
├── package.json
└── public
└── index.html2.编写代码
greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Welcome!";
return greet;
};main.js
const greeter = require('./greeter.js');
document.querySelector("#root").appendChild(greeter());index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>四、打包
1.使用命令行打包
npx webpack --entry ./app/main.js --output-path ./public --output-filename bundle.js --mode developmentnpx 会自动查找当前依赖包中的可执行文件，即会找到webpack命令
webpack参数:
- --entry：应用程序的入口文件
- --output-path：webpack 生成文件的输出位置
- --mode：定义 webpack 所需的 mode
- --config：提供 webpack 配置文件的路径
- --progress：打印处编译进度的百分比值
结果：
zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack app/main.js --output public/bundle.js --mode development
Hash: 8f58b70820535d343983
Version: webpack 4.41.2
Time: 98ms
Built at: 2019-12-14 17:16:23
Asset Size Chunks Chunk Names
bundle.js 4.3 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/greeter.js] 133 bytes {main} [built]
[./app/main.js] 96 bytes {main} [built]2.使用配置文件打包
在项目根目录添加 WebPack 配置文件 webpack.config.js
配置文件指定需要打包的模块，及打包后的模块位置名称，其中 __dirname 是 NodeJS 中的一个全局变量，它执行当前执行脚本所在的目录
zxm@zxm-pc:~/IdeaProjects/webpack-test$ cat webpack.config.js
module.exports = {
mode: 'development', // 开发模式
entry: __dirname + "/app/main.js", // 唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
}
}终端输入：
npx webpack这条命令会自动引用 webpack.config.js 文件中的配置选项
结果：
zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack
Hash: 8f58b70820535d343983
Version: webpack 4.41.2
Time: 95ms
Built at: 2019-12-14 17:29:58
Asset Size Chunks Chunk Names
bundle.js 4.3 KiB main [emitted] main
Entrypoint main = bundle.js
[./app/greeter.js] 133 bytes {main} [built]
[./app/main.js] 96 bytes {main} [built]五、使用 webpack 构建本地服务器
如果需要浏览器监听代码的变化，并自动刷新显示修改后的结果，webpack 提供一个可选的本地开发服务器
安装 webpack-dev-server 包
npm install --save-dev webpack-dev-server查看版本：
zxm@zxm-pc:~/IdeaProjects/webpack-test$ npm list webpack-dev-server
webpack-test@1.0.0 /home/zxm/IdeaProjects/webpack-test
└── webpack-dev-server@5.0.4修改配置文件webpack.config.js
zxm@zxm-pc:~/IdeaProjects/webpack-test$ cat webpack.config.js
module.exports = {
mode: 'development', // 开发模式
entry: __dirname + "/app/main.js", // 唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
},
devServer: {
static: {
directory: __dirname + "/public", // 本地服务器所加载的页面所在的目录
},
port: 9000
}
}启动：
npx webpack-dev-server结果：
zxm@zxm-pc:~/IdeaProjects/webpack-test$ npx webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.105:9000/
<i> [webpack-dev-server] Content not from webpack is served from '/home/zxm/IdeaProjects/webpack-test/public' directory
asset bundle.js 260 KiB [emitted] (name: main)
runtime modules 27.4 KiB 12 modules
modules by path ./node_modules/ 172 KiB
modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
+ 3 modules
modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
+ 2 modules
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./app/*.js 231 bytes
./app/main.js 97 bytes [built] [code generated]
./app/greeter.js 134 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 498 ms
可以说很全面了