webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个：
① webpack-dev-server
类似于 node.js 阶段用到的 nodemon 工具
每当修改了源代码，webpack 会自动进行项目的打包和构建
webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
② html-webpack-plugin
webpack 中的 HTML 插件（类似于一个模板引擎插件）
可以通过此插件自定制 index.html 页面的内容
安装 webpack-dev-server
运行如下的命令，即可在项目中安装此插件：
npm install webpack-dev-server -D
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：webpack-dev-server 会启动一个实时打包的 http 服务器
打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
严格遵守开发者在 webpack.config.js 中指定配置
根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
不再根据 output 节点指定的路径，存放到实际的物理磁盘上
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
html-webpack-plugin
html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
安装 html-webpack-plugin
运行如下的命令，即可在项目中安装此插件：
npm install html-webpack-plugin -D
配置 html-webpack-plugin
安装配置html-webpack-plugin插件后就可以后台即时修改代码，客户端就能即时查看效果
解惑 html-webpack-plugin
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面，自动注入了打包的 main.js 文件,就不需要手动引入js文件了。
devServer 节点
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，
示例代码如下：
npm run dev 重启服务器即可查看效果
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
loader 概述
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。
比如：
css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理 css 文件
① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用
打包处理 less 文件
① 运行 npm i less-loader less 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
webpack.config.js
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html',
filename:'./index.html',
})
module.exports = {
mode:'development' ,
plugins:[htmlPlugin],
devServer:{
open:true,
port:80,
host:'127.0.0.1',
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
},
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
}
打包处理样式表中与 url 路径相关的文件
① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中 ? 之后的是 loader 的参数项：
limit 用来指定图片的大小，单位是字节（byte）
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借
助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：
安装 babel-loader 相关的包
运行如下的命令安装对应的依赖包：
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
