webpack基础打包技术
Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 Webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。webpack是一个给js准备的打包工具，官方的定义也就是一个打包器。它可以把很多的模块打包成很少的静态文件。webpack有一个自己的特性，就是代码分割；代码分割使得项目在加载时只加载当时需要的一些文件。
9.1 webpack简介
9.1.1 webpack概念
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照
指定的规则生成对应的静态资源。打包如下图8.1所示。
图9.1 webpack打包图框架
Webpack的特点如下：
• 代码拆分
Webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
• Loader
Webpack本身只能处理原生的 JavaScript模块，但是loader转换器可以将各种类型的资源转换成JavaScript模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
• 智能解析
Webpack有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是CommonJS、AMD还是普通的 JS文件。甚至在加载依赖的时候，允许使用动态表达式require("./templates/"+name+".jade")。
• 插件系统
Webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
• 快速运行
Webpack使用异步I/O和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。
9.1.3 webpack安装
首先要安装 Node.js，Node.js自带了软件包管理器 npm，Webpack需要Node.js v 0.6 以上支持，建议使用最新版Node.js。
webpack是前端的一个项目构建工具， 是基于node.js开发出来的一款工具；
webpack安装的安装步骤如下所示。
第一步骤：在本地安装webpack和webpack-cli，其中，--save-dev是本地安装。如果全局安装参数是-个，全局的指的是电脑上安装的webpack包, 所有项目都可以使用。本地webpack是指当前项目的webpack包. 通常全局webpack版本会比较高。
npm i webpack webpack-cli --save-dev
查看版本号：
webpack -v // 查看命令
webpack 5.44.0 // 显示版本号
注意：如果当前的webpack本号是4.x版本，可以npm install webpack@latest -D进行升级。
9.1.2 webpack入门案例
为了更好的来理解webpack的使用，我们使用Visual Studio Code开发工具来演示，接下是详细步骤。
(1) 新建一个文件夹chapter08，然后创建src、dist目录，使用Visual Studio Code打开，如图9.2所示。
图9.2 创建chapter08目录
(2) 建立好目录后，在当前目录下使用“npm init -y”初始化命令，在init的时候省去了逐步敲回车的步骤，生成的默认的package.json。
(3) 在src目录下导入jquery.min.js，该文件从资源库或网上获取，然后在src目录下创建main.js文件，代码如下所示。
1 $(function(){
2 $('p').css('background','green');
3 });
(4) 接下来在src目录下面创建index.html，代码如下所示。
1
2
3
4
5
6
7 ”，修改为“
图9.8 “npm run dev”下的index.html修改效果
但是此时出现的问题是，是需要我们在地址栏每次都输入要访问的页面名称，那由没有一种方法不用我们输入页面名称呢？我们可以在5.2.1的webpack.config.js第15行代码之后增加如下代码段。
1 , // 注意增加逗号
2 //只在内存中打包，不会输出，启动命令为webpack-dev-server
3 devServer:{
4 contentBase:path.join(__dirname,"src"),
5 compress:true,
6 port:3000,
7 open:true,
8 hot:true
9 }
接下来，在客户端运行“num run dev”，会直接进入到浏览器页面，p标签背景色为红色，如果我们将main.js的背景色修改为“yellow”后，p标签背景色会在浏览器即时显示为黄色。如图8.8所示。
图9.9 修改main.js后的index.html效果
注意：读者在阅读的时候，为了减少创新的文件和案例，会在之前的文件上进行修改。
5.2.3 生成html插件
我们使用webpack-dev-server能够实现自动打包编译，生成的bundle.js在内存中，不被用户看到，还要设置script的src标签为 /bundle.js 才能实现自动打包编译。那么我们能否不用自动配置script的src属性呢？
使用webpack的插件，html-webpack-plugin能够实现在内存中创建index.html，并且不用设置script标签，这个插件自动为我们导入生成的bundle.js。
首先，在VS Code终端下使用“npm i html-webpack-plugin -D”安装html-webpack-plugin插件，安装完毕package.json可以看到。
"devDependencies": {
"html-webpack-plugin": "^5.3.2",
"jquery": "^3.6.0",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
既然是一个基于webpack的插件，那么配置就肯定是要在webpack.config.js中进行的。接下来，修改webpack.config.js文件，修改后的代码如下所示。
1 const path = require('path');
2 const htmlWebpackPlugin = require("html-webpack-plugin"); // 新增代码
3 module.exports = {
4 //入口起点
5 entry:path.join(__dirname,'./src/main.js'),//入口
6 //输出路径以及文件名字
7 output:{
8 path:path.join(__dirname,'./dist'),
9 filename:'bundle.js'
10 },
11 //配置loader
12 module:{
13 rules:[]
14 },
15 //配置插件
16 plugins:[
17 //新增代码，用来生成内存中的html页面
18 new htmlWebpackPlugin({
19 // 需要复制在内存中的文件路径
20 template:path.join(__dirname,"./src/index.html"),
21 filename:"index.html" // 复制完成后的文件名
22 }),
23 ],
24 //设置模式，开发模式和生产模式只能配置一个
25 mode:'development',
26 //只在内存中打包，不会输出，启动命令为webpack-dev-server
27 devServer:{
28 contentBase:path.join(__dirname,"src"), // 设置启动后访问的目录
29 compress:true, // 配置是否启用 gzip 压缩
30 port:8888, // 更改服务器端口号
31 open:true, // 启动后直接打开浏览器
32 hot:true // 设置局部刷新
33 }
34 }
将index.html中的script删除后，运行“npm run dev”命令。运行结果如图8.8所示。
图9.10 html插件运行的index.html效果
在该页面上单击鼠标右键，查看当前页面源码。如下所示。
1
2
3
4
5
6
7