目录
初识webpack
webpack基本使用
补充
安装配置webpack-dev-server
安装配置 html-webpack-plugin
关于webpack中的loader
打包处理css文件
打包处理less文件
打包处理样式表中的与url有关的文件
处理js中的高级语法
关于项目发布
初识webpack
早期的前端开发，用 HTML + CSS + JavaScript就可以了，把这些丢到浏览器中，浏览器就会显示出一个网页。
后期为了更快的进行前端的开发，产生许多库，如操作DOM的jquery，操作css的Less等，这个时候前端程序员是舒服了，可浏览器不认识了，它没学啊。
这时候就要利用一些工具将这些语言‘翻译’给浏览器，一个两个还好，当这些小工具多了的时候，不光维护麻烦，操作也麻烦，这时webpack诞生了。使用webpack来统一的管理这些编译小工具。可以理解为：由一个大工具管理一堆小工具，而我们只需要管理大工具就可以了。
Webpack是前端资源的构建工具，也是静态模块打包器。提供 压缩，合并，解决兼容问题
webpack基本使用
非必要，会有脚本架自动生成相关配置，这里主要是主要是走一遍项目创建流程，体验一下webpack
1、创建空项目文件夹---全英文名 ，这里名字为Demo
2、进入当前文件的终端运行 npm init -y ，初始化包管理配置文件，此时空文件夹内会自动生成一个package.json 文件。
【不知道npm是什么命令，没关系，可以先了解下node.js。node.js主要是将浏览器用于解析JS语言的引擎给分离了出来，让JS不通过浏览器也能运行。npm命令就是集成在node.js中的，主要用于管理节点插件(包括安装、卸载和管理依赖关系等)。】
3、在项目文件夹内新建src 文件夹，并在里面新建 index.html 首页 和 index.js 脚本文件
4、初始化html文件 【 vscode 快捷键（！+ tab）】，写上相关结构，如多个列表
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li
- 这是第5个li
- 这是第6个li
- 这是第7个li
- 这是第8个li
- 这是第9个li
5、在当前项目的终端终端运行 npm install jquery -S ，下载jquery，用于对页面结构进行快速操作。【-S 是 --save的缩写，将包信息写入package.json文件中的"dependencies"下】
6、在index.js 文件内通过 import $ from 'jquery' 导入jquery库【记得带 ‘ ’ 号】，并进行相关操作的编写，如实现单双列表的隔行变色。
import $ from 'jquery'
$(function(){
$('li:odd').css("background-color","red")
$('li:even').css('background-color','pink')
})
7、此时在html的 头标签内 ，引入并运行是有问题的，因为浏览器不能识别 jquery 语法。因此列表的格式未发生变化。
通过webpack来解决这个问题。
8、安装webpack，在项目终端运行以下命令，安装webpack相关的包文件
npm install webpack@5.73.0 webpack-cli@4.10.0 -D
-D 将文件写入package.json文件中的"devDependencies"下
-S 和-D的区别是，一个只在开发中会用到，项目正式上线时就不存在了
9、在项目根目录中，创建名为webpack.config.js的配置文件，并初始化以下配置：
module.exports = {
mode: 'development'
}
//mode 用来构建模式的可选值有两个
// 1.development 开发环境，不会对打包生成的文件进行代码压缩和性能优化，且打包速度快，
// 适合在开发阶段使用。
// 2.production 生产环境，会对打包生成的文件进行代码压缩和性能优化，且打包速度很慢，
// 仅适合在项目发布阶段使用。
webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
10、在package.json文件中的scripts节点下，新增脚本
"scripts": {
"dev": "webpack"
}
//dev只是个名称，可以更具自己的喜好更改
11、在项目终端运行 npm run dev
在webpack中默认的打包入口文件为src下的index.js文件，默认的输出文件路径为自动生成的dist 下的main.js文件。
12、更改html中
13、此时再次运行会发现已经成功了。
补充
我们在运行 npm run dev 时，会先读取 webpack.config.js 的配置文件 ， 然后再执行webpack，根据这个特性，我们还可以进行进一步的修改，调整。
webpack中默认的打包入口为 src->index.js 默认的输出文件路径为dist->main.js 我们可以在webpack.config.js 配置文件中通过entry节点指定打包入口，通过output节点指定打包的出口
const path =require('path') // 导入node.js中的专门操作路径的模块
module.exports={
entry:path.join(__dirname,'./src/index.js'), //打包文件的入口文件的路径
output:{
path:path.join(__dirname,'./dist'), //出口
filename:'main2.js'},
mode:'development'
}
dist文件夹下出现了新的js文件。
在上述阶段，会发现，只要我们能稍微就改下 index.js 中的代码就需要重新run一次，才能看到修改后的页面，对于懒人程序员来说，可能会直接放弃这一行业，十分不友好。我们希望一修改代码页面就能看出变化。因此webpack中提供了两个插件来解决这个问题。 webpack-dev-server 和 html-webpack-plugin 下载并配置就可以。
安装配置webpack-dev-server
下载：npm install webpack-dev-server -D 【这里没有@指定版本，默认安装最新版。合格的程序猿需要跟上最新版，并解决可能出现的问题】
配置：修改 package.json -->scripts 中的 脚本命令 【这里改了个名字，将dev改为了test，实际上没什么影响】
再次运行：npm run test
这个时候会发现终端没有直接结束，而是在等待阶段，这个时候只要修改了index.js 中的代码，就会自动进行webpack的打包操作。
然而问题来了，我们会发现页面并没有根据我们的修改而进行相应的改变。这是因为vscode中的打开方式为 file 协议，而我们需要通过 http://localhost:8080/ 才能访问，
然而问题又来了，输入地址后浏览器不仅访问不到我们想要的界面，反而帅气的丢出了404。【为什么和我学的不一样，我好烦】
我们返回去看 npm run test 运行时的提示，好像也看不出什么。。。。【这可能就是新版带来的痛苦】。通过查找资料发现，我们需要在 webpack.config.js 进行相关的设置
module.exports={
entry:path.join(__dirname,'./src/index.js'), //打包文件的入口文件的路径
output:{
path:path.join(__dirname,'./dist'), //出口
filename:'main.js'},
mode:'development',
devServer: {
static:'./',//根目录，需要点击进入src才能查看
//static:path.join(__dirname, 'src'),//可以直接访问到src页面，实现页面的实时查看。
host: "localhost",
port: 8080,
hot: true,
},
}
将 static:path.join(__dirname, 'src'),这样设置就可以直接访问到src页面，实现页面的实时查看。无需安装 html-webpack-plugin 了，这可能是新版带来的好处吧。。。
补充【重要！！！】： npm run test 是通过webpack 将js 文件改写成浏览器能识别的文字。webpack-dev-server插件能提供快速打包访问是因为它将打包后的js文件直接存入了内存当中，【磁盘中访问不到，但通过浏览器输入文件名却能真实看到】这个时候我们需要更改html文件中的