一、前端工程化的概念
webpack:前端工程化的一种具体解决方案
前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。?前端工程化的解决方案
目前主流的前端工程化解决方案：
webpack (?🔗：webpack中文文档?)? ?（主要用这个）
parcel (?🔗：parcel中文网?)
二、webpack的基本使用
主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆（减小体积）、处理浏览器端JavaScript的兼容性（将高级的代码转换成低级的没有兼容问题的代码，有对应不同版本的解决方案）、性能优化等强大的功能。
优点：让程序员把工作的重心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。
*目前Vue, React等前端项目，基本上都是基于webpack进行工程化开发的。
2.1案例——初始化隔行变色案例
（1）新建项目空白目录，运行npm init -y，初始化包管理配置文件package.json
（2）新建src源代码目录
（3）新建src/index.html首页和src/index.js脚本文件
（4）初始化页面基本结构.index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>这是第 1 个li</li> <li>这是第 2 个li</li> <li>这是第 3 个li</li> <li>这是第 4 个li</li> <li>这是第 5 个li</li> <li>这是第 6 个li</li> <li>这是第 7 个li</li> <li>这是第 8 个li</li> <li>这是第 9 个li</li> </ul> </body> </html>（5）运行npm install jquery -S，安装jQuery。（等价于npm install jquery --save、npm i jquery -S，save是将导包的配置写入package.json的意思，不加--save也会写入）
（6）通过ES6模块化的方式导入jQuery，实现隔行变色效果
----------index.js import $ from 'jquery' $(function(){ $('li:odd').css('background-color','red') $('li:even').css('background-color','pink') })并在index.html中引入index.js.
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js"></script> </head>
（7）右键，浏览器中打开
?运行结果：未实现预期效果，报错。原因为语法过于高级导致。需要使用webpack解决
?小技巧：
（1）vscode里html文件输！会生成html模板
（2）html中多个<li>的快捷方式：ul>li{这是第 $ 个li}*9，生成9个li
（3）vscode右键无在浏览器中打开的选项。解决方案如下：安装插件
?2.2 案例——采用webpack解决初始化隔行变色不生效问题
2.2.1 webpack的安装
在终端运行npm install webpack@5.42.1 webpack-cli@4.7.2 -D
此处的-D和上面的-S效果相同，都是将信息写入package.json。只不过写的位置不同而已
-D是放入devDependencies【开发阶段用、上线后不需要使用】下，-S放入dependencies【开发和上线后都需要使用】下。
-D的全写是--save-dev
"dependencies": {
"jQuery": "^1.7.4",
"jquery": "^3.6.0"
},
"devDependencies": {
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2"
}知识点：如何判断一个包是-S还是-D呢？
进入npmjs.com。搜报名，如webpack。查看install的方式。如下webpack采用-D方式
?2.2.2?项目中配置webpack
?（1）项目根目录中，创建webpack.config.js的webpack配置文件，初始化配置如下：
module.exports = {
mode:'development' //mode用来指创建模式，可选值有development和production
//开发时用development，因为开发追求的是打包的速度，而不是体积；
//发布上线时用production，因为上线追求的是体积小，而不是打包速度；
}（2）package.json中的script节点下，新增dev脚本
"scripts": {
"dev":"webpack" //script节点下的脚本，可以通过npm run执行，如 npm run dev。
注：此处必须是webpack，但不一定是dev
},（3）终端执行npm run dev。
从上图可以看出,新增main.js文件，main.js文件是压缩index.js和jquery.js而来的
npm run dev时先读取index.js，再去读取webpack.config.js获取相关配置，再根据配置运行webpack
（4）此时发现在新增dist/main.js文件。main.js是有index.js转化来的，不存在兼容性问题。
所以，在index.html中引入main.js而不是index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/main.js"></script>
</head>（5）浏览器中打开index.html，隔行变色效果实现，且控制台无报错：
?2.3 webpack的基本使用
?2.3.1 webpack的默认约定
在webpack4.x和5.x版本中，有如下的默认约定：
（1）默认的打包入口文件为src/index.js
（2）默认的输出文件路径为dist/main.js
2.3.2 修改webpack的默认约定
在webpack.config.js中，通过entry修改打包的入口，output修改打包的出口。
注：（1）需引入path。path.join是用于路径拼接的
? ? ? ? （2）__dirname是取当前文件所在的路径。
const path = require('path')
module.exports = {
mode:'development', //mode用来指创建模式，可选值有development和production
entry:path.join(__dirname,'./src/index1.js'), //打包入口文件路径
output:{
path:path.join(__dirname,'./dist'), //输出文件的存放路径
filename:'bule.js' //输出文件名称
}
}同步修改index.html，引入bule.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/bule.js"></script>
</head>执行npm run dev无报错。
存在问题:每次修改src源代码后都需要执行npm run dev.需要安装插件才可以实现src源代码和dist文件同步更新
2.3.3 webpack中的插件
最常用的webpack插件有2个：
（1）webpack-dev-server:类似于node.js中的nodemon工具，每当修改了源代码，webpack会自动进行项目的打包和构建
（2）html-webpack-plugin:webpack中的html插件(类似于一个模板引擎插件)，可以通过此插件自定义index.html页面的内容
1、webpack-dev-server的安装：终端执行npm install webpack-dev-server@3.11.2 -D
2、webpack-dev-server的配置：修改package.json中的dev命令为webpack serve
"scripts": {
"dev": "webpack serve"
},3、运行npm run dev，重新进行项目打包。更新源代码后，自动打包。
问题：执行npm run dev后报错如下：
?解决办法：重新安装webpack-cli：终端执行npm install webpack-cli -D。问题解决。