目录
初识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）】，写上相关结构，如多个列表
<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>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的 头标签内 <script src="./index.js"> </script>，引入并运行是有问题的，因为浏览器不能识别 jquery 语法。因此列表的格式未发生变化。
通过webpack来解决这个问题。
8、安装webpack，在项目终端运行以下命令，安装webpack相关的包文件
npm install [email protected] [email protected] -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中 <script >中的src 文件地址，<script src="../dist/main.js"></script>
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文件中的<script>标签，如下。不然页面不会进行相应的改变，因为它引入的还是上个版本的js'打包文件。
安装配置 html-webpack-plugin
下载 ：npm install html-webpack-plugin -D
一个插件就能实现，这个还装个嘚。。。【有兴趣可以自行了解】
关于webpack中的loader
webpack默认值只能打包处理以.js 后缀结尾的模块，其他模块如.css文件则处理不了，这个时候需要调用loader加载器才能正常打包。
当在 index.js文件中通过 import './index.css' 导入，但未调用loader时会出现一下错误。
打包处理css文件
1、运行 npm i style-loader css-loader -D 安装插件
2、在webpack.config.js文件中的 module.exports 内添加一下规则 module->rules
module:{
rules:[
{test:/\.css$/,use: ['style-loader','css-loader']}
]
}
//test表示要处理的文件类型，use表示使用的loader，有先后顺序，
//先经过css-loader处理再转交给style-loader处理,最终合并到js文件中打包处理less文件
1、运行 npm i less-loader less -D 安装插件
2、在webpack.config.js文件中的 module.exports 内添加一下规则module->rules
module:{
rules:[
{test:/\.less$/,use: ['style-loader','css-loader','less-loader']}
]
}
//less-loader内部已经使用了less，无需再调用，注意调用顺序打包处理样式表中的与url有关的文件
1、运行 npm i url-loader file-loader -D 安装插件
2、在webpack.config.js文件中的 module.exports 内添加一下规则 module->rules
module:{
rules:[
{test:/\.jpg|png|gif$/,use: 'url-loader?limit=4399'}
]
}
//会将小于4399字节的图片转为base64格式，这样可以直接读取到图片，防止小图片频繁的进行请求
处理js中的高级语法
当js语法太过高级时，如装饰器语法，导致webpack也不认识时可以通过loader插件解决这个问题。
1、npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
2、在webpack.config.js文件中的 module.exports 内添加一下规则 module->rules
module:{
rules:[
{test:/\.js$/,use: 'babel-loader',exclude:'/node_modules/'}
]
}
//只要处理自己写的js文件就行，像第三方库中的js文件，它们本身就会做兼容性的处理，不需要我们担心3、配置babel，根目录新建babel.config.js
module.exports={
"plugins": ["@babel/plugin-proposal-decorators"]
}
//相当于插件的插件关于项目发布
新建脚本，运行 npm run buile 让生成的js文件保存到本地磁盘为不是内存，这时只要将dist文件交给后端去处理就可以。
"scripts": {
"test": "webpack serve ",
"build": "webpack --mode production"
},解决浏览器中问题错误，行号不对应问题
