目录
一.前端工程化
1.小白眼中的前端开发 vs 实际的前端开发
2.什么是前端工程化
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的 。
好处：前端开发自成体系，有一套标准的开发方案和流程。
3.前端工程化的解决方案
早期的前端工程化解决方案 ：
（1）grunt（ Grunt: JavaScript 世界的构建工具 | Grunt 中文网/ ）
（2）gulp（ gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网/ ）
目前主流的前端工程化解决方案：
（1）webpack（ webpack | webpack 中文文档 | webpack 中文网/ ）
（2）parcel（ Parcel 中文网/ ）
二.webpack的基本使用
1.什么是 webpack
概念：webpack 是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
【注意】目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。
2.创建列表隔行变色项目
2.1.新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
2.2.新建 src 源代码目录
2.3.新建 src -> index.html 首页和 src -> index.js 脚本文件
2.4.初始化首页基本的结构
2.5.运行 npm install jquery –S 命令，安装 jQuery
npm install jquery –S 
2.6.通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
结果 ：
3.在项目中安装 webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D 
4.在项目中配置 webpack
4.1
4.1.1.在项目根目录src目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置 :
//使用Node.js中的导入语法，向外导出一个webpack的配置对象
module.exports = {
//代表webpack运行模式，mode有两个可选值：development与production
//1.开发的时候使用development，因为development模式下用npm run dev命令打包速度快,但是生成的打包文件大
mode: 'development',
//2.项目发布上线的时候使用production，因为production模式下用npm run dev命令打包速度慢，但是生成的打包文件小
//mode:'production'
}图：
4.1.2.在 package.json 的 scripts 节点下，新增 dev 脚本如下 ：
4.1.3.在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
npm run dev图：
4.1.4.引入webpack打包生成的js文件
src下的index.js中的代码信息在webpack打包的时候会被webpack合并在dist下的main.js文件中
效果展示：（成功）
【补充】-S与-D的区别是什么？
-S 是"--save"的简写
-D 是"--sava-dev"的简写
4.2.问：webpack.config.js 文件的作用 ？
答：webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取webpack.config.js这个配置文件， 根据配置信息将项目打包。
【注意】由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关
的语法和模块进行 webpack 的个性化配置。
问：webpack.config.js文件的加载时机是什么？
package.json文件中定义了npm run dev的执行详情（即npm run webpack），当我们使用npm run dev命令的时候就是在调用webpack对项目进行打包，webpack会先去读取webpack.config.js文件中的配置信息，根据配置信息将项目打包和导出。
4.3.webpack 中的默认约定：
4.4.自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
代码如下：
写法一：
//导入node.js中专门操作路径的模块
const path = require('path')
module.exports = {
//打包入口文件的路径
entry: './src/index2.js',
output: {
//出口路径，__dirname表示项目根目录
path: path.resolve(__dirname, 'dist'),
//输出文件名称,随便取名
filename: 'zcj.js'
}
}写法二（黑马程序员）：
//导入node.js中专门操作路径的模块
const path = require('path')
module.exports = {
mode: 'development',
//打包入口文件的路径
entry: path.join(__dirname,'./src/index.js'),
output: {
//出口路径，__dirname表示项目根目录
path: path.join(__dirname, 'dist'),
//输出文件名称,随便取名
filename: 'zcj.js'
}
}结果展示：
【Bug记录】
1.一定要注意写配置代码时用单引号'',不能用双引号""。
2.必须将webpack.config.js这个配置文件放在项目的根目录下，如果webpack.config.js文件位置不对，就会造成配置不生效的情况。
三.webpack中的插件
1.webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的
webpack 插件有如下两个：
（1）webpack-dev-server
类似于 node.js 阶段用到的 nodemon 工具；
每当修改了源代码，webpack 会自动进行项目的打包和构建。
（2）html-webpack-plugin
webpack 中的 HTML 插件（类似于一个模板引擎插件）；
可以通过此插件自定制 index.html 页面的内容。
2.webpack-dev-server
【问】修改了源代码之后需要重新运行"npm run dev"命令对项目进行打包，有什么更方便的方法吗？
【答】webpack-dev-server 插件可以让 webpack 监听项目源代码的变化，从而进行自动打包构建 ，即每次修改了源代码按下"Ctrl+S"保存之后不再需要重新运行"npm run dev"命令。
2.1.安装 webpack-dev-server
运行如下的命令，即可在项目中安装此插件:
npm install webpack-dev-server@3.11.2 -D安装成功如图：
2.2.配置 webpack-dev-server
（1）修改 package.json -> scripts 中的 dev 命令如下
"scripts": {
"dev": "webpack serve"
}（2）再次运行 npm run dev 命令，重新进行项目的打包
此处可能报如下错误：
解决办法：
安装webpack-cli，安装命令：
npm i --save-dev webpack-cli安装成功：
【问】为什么运行"npm run dev"命令打包项目后，项目根目录下没有再生成dist目录了？
【答】因为webpack-server这个插件可以自动且实时地打包项目文件，类似于热部署的效果，但是被打包的文件是存放在内存中的并没有存放在磁盘中，因为如果开发人员在频繁地修改代码并频繁地Ctrl+S保存项目，那么webpack-server插件就会频繁地打包项目文件，如果将打包地文件放在磁盘上，那么就会出现插件频繁地去磁盘上读写，效率极低，而放在内存上的好处就是：内存的存在就是为了频繁地读写。
如图：
（3）在浏览器中访问 http://localhost:8080 地址，查看自动打包效果：
【补充】停止实时打包的方法----ctrl+c就可以了
【补充】如果前端项目是在IDEA这种可以自动保存的开发工具上也要按"Ctrl+S"才能自动打包，VSCode上也是如此。
2.3.打包生成的文件哪儿去了？
2.4.生成到内存中的文件该如何访问？
3.html-webpack-piugin
【需求】如图：当我运行"npm run dev"打包命令后，会得到项目在浏览器中的访问地址，但是打开这个地址展示的是项目目录，而不是index.html界面，如何做到输入访问地址后直接展示index.html界面？
【答】使用html-webpack-piugin插件。
浏览器打开：
【问】html-webpack-piugin插件的作用？
【答】将指定文件（src目录）目录下的文件（index.html文件）复制到项目根目录（changeColor目录）下，依据src目录下index.html为模板复制生成的这个文件是一个虚拟文件，也是放在内存中的；当项目一启动，就会自动访问根目录下的名为index.html的虚拟文件，与此同时还会在内存中找js脚本文件并自动注入js脚本文件。
图片展示：
3.1. 安装 html-webpack-plugin
安装命令：
npm install html-webpack-plugin@5.3.2 -D安装成功：
3.2.配置 html-webpack-plugin
【参数解释】template的作用在于指定你要复制哪一个文件，filename代表将文件复制到哪里、叫什么名字。
测试成功：
4.devServer 节点
配置：
测试成功：
【补】在http协议中，如果端口号是80，则可以被省略
四.webpack中的loader
1.Loader概述
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，
webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如 ：
（1）css-loader 可以打包处理 .css 相关的文件
（2）less-loader 可以打包处理 .less 相关的文件
（3）babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
2.Loader的调用过程
3.
遇到.css结尾的文件，用use数组来指定要调用哪些loader
4.
浏览器先拿到html标签，如果使用第一种方式，则浏览器还需要请求一次图片才能将请求到的图片渲染到浏览器上；如果是base64这种方式就不用再发第二次请求了，浏览器在拿到标签的时候就能拿到图片。base的缺点在于将图片转成base64字符串后，文件占用的空间会变大，10KB可能会变成13KB。因此，大图片（例如：首页轮播图）不适合转换为base64图片
五.打包发布
略
六.Source Map
略
扫一扫
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
