webpack基础打包技术
Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 Webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。webpack是一个给js准备的打包工具，官方的定义也就是一个打包器。它可以把很多的模块打包成很少的静态文件。webpack有一个自己的特性，就是代码分割；代码分割使得项目在加载时只加载当时需要的一些文件。
.png)
9.1 webpack简介
9.1.1 webpack概念
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照
指定的规则生成对应的静态资源。打包如下图8.1所示。
.png)
图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所示。
.png)
图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 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <script src="jquery.min.js"></script>
8 <script src="main.js"></script>
9 </head>
10 <body>
11 <p>hello webpack</p>
12 <p>hello webpack</p>
13 <p>hello webpack</p>
14 </body>
15 </html>
(5) 在VS Code编辑器上使用鼠标单击右键，选择“Open with Live Server”，如图所示。
.png)
图9.3 使用Live Server打开页面
程序运行效果如图9.4所示。
.png)
图9.4 程序运行结果页面
从程序运行结果可以发现，第（5）步的hello webpack被第（4）步的js代码给设置成了背景为绿色的格式。但是前提是需要我们在index.html提前导入jquery.min.js文件，相当于开发者在使用的时候需要引入两个js文件，有没有一种解决方案，在网页当中针对需要的2个或多个js文件等只需要引入一个文件即可呢？答案是肯定的。接下来，我们使用webpack的打包功能实现此功能。
(6) 使用npm命令安装“npm i jquery -D”，在生产环境下安装jquery的文件依赖。
(7) 修改main.js文件和index.html文件。在main.js文件上面增加一行代码，代码如下所示。
import $ from 'jquery' // 和引入外部jquery文件的作用一致
(8) 使用webpack的打包命令，将多个js文件打包为一个文件即可。
webpack ./src/main.js -o ./dist --mode=development
将第（5）步中的index.html代码中第7行、第8行代码删除，增加如下代码，即添加对
<script src="../dist/main.js"></script>
(9) 在VS Code编辑器上使用鼠标单击右键，选择“Open with Live Server”，程序运行结果和图9.4一样，证明我们采用webpack打包的效果是一样的，优点是加载的时候只需要加载一个js文件即可，可以显著提交效率。
9.1.4 五个核心概念
接下来我们先理解五个核心概念：入口(entry)、输出(output)、loader、插件(plugins)、Mode模式。
1. Entry:webpack 创建应用程序所有依赖的关系图。图的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点认为是根上下文或 APP第一个启动文件。每个 HTML 页面都有一个入口起点。单页应用(SPA)有一个入口起点，多页应用(MPA)有多个入口起点。
2. output：输出指示 webpack打包后的资源bundles输出到哪里去，以及如何命名。将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。output选项可以控制webpack如何向硬盘写入编译文件。注意，即使可以存在多个entry起点，但只指定一个output配置。
3. Loader：webpack 只能处理js、json文件，像css、img文件等都处理不了，需要loader进行处理，编译成webpack能够处理的资源。webpack的目标是聚焦于项目中的所有资源(asset), 而浏览器不需要关注考虑这些。webpack把每个文件(.css, .html, .scss, .jpg, etc.)都作为模块处理。然而webpack自身只理解JavaScript。webpack loader 在文件被添加到依赖图中时，将文件源代码转换为模块。
loader可以使你在import或"加载"模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。
4.Plugins：插件是 wepback 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上。插件目的在于解决 loader无法实现的其他事。
由于loader仅在每个文件的基础上执行转换，而插件(plugins) 常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 来创建它的一个实例。插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5. Mode模式：指示webpack使用相应模式的配置。如表9-1所示。
| 选项 |
描述 |
特点 |
| development |
会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和NamedModulesPlugin。 |
能让代码本地调试运行的环境 |
| production |
会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为production。 |
能让代码优化上线运行的环境 |
9.2 webpack配置
9.2.1 config.js配置
webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
接下来，使用案例来演示webpack.config.js文件的使用，在chapter08目录下创建一个webpack.config.js文件。参考代码如下所示。
1 const path = require('path');
2 module.exports = {
3 //入口起点
4 entry:path.join(__dirname, // 当前文件所在的目录的绝对路径
5 './src/main.js'), //入口
6 //输出路径以及文件名字
7 output:{ // 出口文件
8 path:path.join(__dirname,'./dist'),
9 filename:'bundle.js' // 打包后文件的名称
10 },
11 module:{ //配置loader
12 rules:[]
13 },
14 plugins:[], //配置插件
15 mode:'development' //设置模式
16 }
webpack.cofig.js文件编写完毕之后，不用像9-1再输入复杂的webpack命令。接下来在客户端环境下输入webpack即可，如图9.5所示。
.png)
图9.5 webpack进行打包结果
从程序运行结果会发现已经在dist输出目录下生成了bundle.js文件，并且如果去VS Code去查看也会发现bundle.js已经存在于dist目录下。这时候，将5.1节的index.html中的script引用文件修改为如下代码。
<script src="../dist/bundle.js"></script>
在VS Code编辑器上使用鼠标单击右键，选择“Open with Live Server”，程序运行结果和图9.4一样，证明我们采用webpack打包的效果是一样的，优点是打包的时候命令方式更加简单。原来的命令需要设定的入口和出口以及开发模式，现在这三个参数都在配置文件中配置过来，所以不需要再写那么长的命令了。
9.2.2 安装自动打包插件
前面的几节只是让 Webpack 正常运行起来了，但在实际开发中你可能会需要：
• 提供 HTTP 服务而不是使用本地文件预览。
• 监听文件的变化并自动刷新网页，做到实时预览。
• 支持 Source Map，以方便调试。
对于这些， Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容，再结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。
下面为之前的小项目 Hello,Webpack 继续集成 DevServer。首先需要安装 DevServer如下所示。
npm i webpack-dev-server -D
由于我们是本地安装webpack-dev-server，无法把它当成脚本命令，只有安装到全局才可以正常运行。 需要先安装corss-env命令。
npm i cross-env -D
在package.json中的scripts中添加如下代码：
"dev": "cross-env NODE_ENV=development webpack serve"
增加完之后代码如下所示。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack serve"
}
或者直接使用：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --config webpack.config.js"
},
这种方式不用安装cross-env.
这时候在终端运行“npm run dev”命令，呈现结果如图8.6所示。
.png)
图9.6 “npm run dev”运行结果
在地址栏输入/src,则默认进入到index.html页面，效果和同8.4一样，如图8.7所示。
.png)
图9.7 “npm run dev”下的index.html
这时候，我们修改一下main.js里面的“$('p').css('background','green');”修改为“$('p').css('background','red');”。刷新一下，发现8.7 p标签背景并没有发生变化，原因是什么呢？这个时候将index.html页面中的“<script src="../dist/bundle.js"></script>”，修改为“<script src="/bundle.js"></script>”，再次刷新页面会发现p标签背景已经发生了变化。如图8.8所示。
.png)
图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所示。
.png)
图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所示。
.png)
图9.10 html插件运行的index.html效果
在该页面上单击鼠标右键，查看当前页面源码。如下所示。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7 <script defer src="bundle.js"></script></head>
8 <body>
9 <p>hello webpack </p>
10 <p>hello webpack </p>
11 <p>hello webpack </p>
12 </body>
13 </html>
通过程序源码我们会发现，html-webpack-plugin生成的index.html是在内存中的，它会自动为我们导入由webpack-dev-server生成的bundle.js。
9.3 处理文件
9.3.1 处理css文件
我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，接下来，我们按照步骤演示一下。
首先介绍下style-loader和css-loader，因为处理css文件之前必须要安装这两个模块，style-loader是能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容；css-loader:是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。打包安装命令如下代码所示。
npm i style-loader css-loader -D
第二步：命令行安装成功后，在src目录下新建css子目录，然后在css子目录下面新建one.css文件，样式代码参考如下所示。
body{
background-color: peru;
}
p{font-size: x-large;}
第三步：在main.js中通过“import './css/one.css'”命令引入。要成功引入并生效，需要修改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 {test:/\.css$/, // 正则匹配要识别的css
15 // 使用style-loader和css-loader进行处理
16 use:['style-loader','css-loader']} ]
17 },
18 //配置插件
19 plugins:[
20 //用来生成内存中的html页面
21 new htmlWebpackPlugin({
22 template:path.join(__dirname,"./src/index.html"),
23 filename:"index.html"
24 }),
25 ],
26 //设置模式，开发模式和生产模式只能配置一个
27 mode:'development',
28 //只在内存中打包，不会输出，启动命令为webpack-dev-server
29 devServer:{
30 contentBase:path.join(__dirname,"src"),// 设置启动后访问的目录
31 compress:true, // 配置是否启用 gzip 压缩
32 port:8888, // 更改服务器端口号
33 open:true, // 启动后直接打开浏览器
34 hot:true // 设置局部刷新
35 }
36 }
最后，在终端使用“npm run dev”命令运行一下即可，在浏览器会看到运行后效果如下图8.9所示。
.png)
图9.11 webpack处理css文件
通过程序运行结果可以发现，我们在css子目录下编写的one.css文件针对body和p标签的设置已经生效。
9.3.2 处理less文件
上一小节，我们使用webpack针对css文件进行了处理。接下来，我们我演示一下webpack如何来处理less文件，使用步骤如下所示。
首先使用less文件之前，必须安装less-loader。打包安装命令如下代码所示。
npm i less less-loader -D
第二步：命令行安装成功后，在src的css子目录下面新建two.less文件，样式代码参考如下所示。
p{border: 1px dotted black;
width: 600px;height: 30px;}
第三步：在main.js中通过“import './css/two.less'”命令引入。要成功引入并生效，需要修改webpack.config.js文件中的module配置。
1 //配置loader
2 module:{
3 rules:[
4 {test:/\.css$/,use:['style-loader','css-loader']},
5 {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
6 ]
7 },
最后，在终端使用“npm run dev”命令运行一下即可，在浏览器会看到运行后效果如下图8.10所示。.png)
图9.12 webpack处理less文件
通过程序运行结果可以发现，我们在css子目录下编写的two.less文件针对color、width和height标签的设置已经生效。
知识点拨：如果使用webpack命令打包，会发现在bundle.js文件里面包含代码“.push([module.id, \"p {\\n color: gray;\\n width: 600px;\\n height: 30px;\\n}\\n\", \"\"]);”，其已经编译成css，且被放入了main.js的生成文件内。
9.3.3 处理scss文件
scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。
上一小节，我们使用webpack针对less文件进行了处理。接下来，我们我演示一下webpack如何来处理scss文件，使用步骤如下所示。
首先使用scss文件之前，必须安装scss-loader。打包安装命令如下代码所示。
npm i node-sass sass-loader -D
第二步：命令行安装成功后，在src的css子目录下面新建three.scss文件，样式代码参考如下所示。
p{border: 1px dotted black;
width: 600px;height: 30px;}
第三步：在main.js中通过“import './css/three.scss'”命令引入。要成功引入并生效，需要修改webpack.config.js文件中的module配置。
1 //配置loader
2 module:{
3 rules:[
4 {test:/\.css$/,use:['style-loader','css-loader']},
5 {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
6 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
7 ]
8 },
最后，在终端使用“npm run dev”命令运行一下即可，在浏览器会看到运行后效果如下图8.11所示。
.png)
9.13 webpack处理scss文件
通过程序运行结果可以发现，我们在css子目录下编写的two.less文件针对p标签font-style和font-weight属性的设置已经生效。
注意：如果安装node-sass命令不成功，可以使用“npm i node-sass sass-loader -D”命令进行安装。
9.3.4 处理图片文件
上一小节，我们使用webpack针对scss文件进行了处理。默认情况下，webpack无法处理css中的图片路径和字体样式路径。接下来，我们我演示一下webpack如何来处理图片和样式文件，使用步骤如下所示。
首先安装url-loader，如果安装有问题，可以使用“npm i file-loader url-loader -D”安装。打包安装命令如下代码所示。
npm i url-loader -D
第二步：命令行安装成功后，在src的index.html的p标签之后增加div代码如下所示。
<div class="tu01.css"></div>
css子目录下面新建tu.css文件，样式代码参考如下所示。
div{
width:600px;height: 400px;
border: 1px solid #f00;
background: url('../img/1.jpg');
background-size:cover;
}
第三步：在main.js中通过“import './css/three.scss'”命令引入。要成功引入并生效，需要修改webpack.config.js文件中的module配置。此处，limit的作用是limit给定的值大于等于图片的大小则不会被转为base64,小于则会被转为base64。
1 //配置loader
2 module:{
3 rules:[
4 {test:/\.css$/,use:['style-loader','css-loader']},
5 {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
6 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
7 {test:/\.(jpg|png|gig|bmp|jpeg)$/,
8 use:['url-loader?limit=1234&name=[name].[ext]']}
9 ]
10 },
第四步：在终端使用“npm run dev”命令运行一下即可，在浏览器会看到运行后效果如下图8.11所示。
.png)
9.14 webpack处理图片和样式文件
通过程序运行结果可以发现，我们在css子目录下编写的tu.css文件针对divp标签的tu01类样式属性的设置已经生效。
接下来，在src下再次增加一个img2子目录，然后增加一个同名但和上述图片不通过的“1.jpg”，在index.html下增加“<div class="tu02">222</div>”，在tu.css增加代码如下所示。
.tu02{
width:500px;height: 300px;
background: url('../img2/1.jpg'); background-size:cover;
}
使用“npm run dev”命令运行一下即可，在浏览器会看到运行后效果如下图8.12所示。
.png)
9.15 webpack处理图片和样式文件（图片覆盖）
通过程序运行结果发现，后来增加的1.jpg也被用在了第一个div上。原因在于一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，这个时候可以加上hash值的前八位作为图片名，可以避免重名。修改webpack.config.js代码如下所示。
{ test: /\.(jpg|png|gig|bmp|jpeg)$/,
use: ['url-loader?limit=1000&name=[hash]-[name].[ext]'] }
webpack.config.js配置文件修改后，再次使用“npm run dev”运行程序，程序运行结果正确，如图9.16所示。
.png)
图9.16 webpack处理图片和样式文件（图片不重复）
我们通过查看网页的源码，会发现图片名已经变成了hash值，如图8.14所示。
.png)
9.17 webpack处理图片和样式文件（源码解读）
知识点拨：base64就是一串字符串码来表示的图片，在加载页面或者js的时候就一并加载过来，减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道，http请求每次建立都会占用一定的时间，对于小图请求来说，可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求，保证页面加速渲染的一种手段。
9.4 本章小结
• Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照
指定的规则生成对应的静态资源。
• webpack包括五个核心概念：入口(entry)、输出(output)、loader、插件(plugins)、Mode模式。
• webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。
• loader是webpack最重要的部分之一，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里边单独用module进行配置。
• output选项可以控制webpack如何向硬盘写入编译文件。注意，即使可以存在多个entry起点，但只指定一个output配置。
• 插件(plugins) 常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。
• Mode模式指示webpack使用相应模式的配置。
• webpack可以用于处理css、less文件、scss、处理图片和样式文件。
9.5 理论习题与实践练习
1.填空题
1.1 webpack的五个核心特性是 、 、 、 。
1.2 webpack是一个 。
1.3 webpack可以处理文件包括 、 、 、。
2.思考题
2.1 有哪些常见的Loader？他们是解决什么问题的？
2.2 有哪些常见的Plugin？他们是解决什么问题的？。
2.3 请简述webpack的热更新是如何做到的？说明其原理？。
2.4 请简述如何利用webpack来优化前端性能？（提高性能和体验）？
2.5 npm打包时需要注意哪些？如何利用webpack来更好的构建？
3.编程题
3.1 请根据本周案例，完成webpack的基本配置；
3.2 请参考本章节案例，结合自己的实际网页，完成webpack针对css文件、less文件、scss文件、图片的使用。
- 点赞
- 收藏
- 关注作者
评论（0）