1.执行npm run dev发生了什么？
npm run 其实执行了package.json中的scripts脚本，npm run dev的执行如下：
比如:
"scripts": { "dev": "webpack" }, 相当于执行 "webpack"webpack.config.js 是 webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意:由于 webpack是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js 相关的语法和模块进行webpack的个性化配置。
3 webpack中的默认约定
在webpack 4.x和5.x的版本中，有如下的默认约定:
②默认的输出文件路径为dist -> main.js 注意:可以在webpack.config.js 中修改打包的默认约定
4.自定义打包的入口与出口
在 webpaick.config.js 配置文件中，通过entry 节点指定打包的入口。
通过output节点指定打包的出口。示例代码如下:
5.安装和配置webpack-dev-server插件
通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack 用起来更方便。最常用的webpack插件有如下两个:
(1)webpack-dev-server
●类似于node.js 阶段用到的nodemon工具
●每当修改了源代码，webpack 会自动进行项目的打包和构建
安装webpack-dev-server
npm i webpack-dev-server@3.11.2 -D
配置webpack-dev-server
①修改package.json -> scripts中的dev命令如下: "scripts": { "dev": "webpack serve" },②再次运行npm run dev命令，重新进行项目的打包
③在index.html中引入内存中的bundle.js，因为webpack-dev-server打包后将bundle.js放到了内存，操作更快。
<!-- 加载和引用内存中的bundle.js --> <script src="/bundle.js"></script>④在浏览器中访问http://localhost:8080=>src=>index 查看自动打包效果
注意: webpack-dev-server 会启动一个实时打包的http服务器
(2)html-webpack-plugin
webpack中的 HTML插件（类似于一个模板引擎插件)
可以通过此插件自定制index.html页面的内容。
在使用webpack-dev-server我们访问http://localhost:8080还需要打开src=>index.html，繁琐，现在需要一个插件，自动跳转到index.HTML。
安装html-webpack-plugin
npm i html-webpack-plugin@5.3.2 -D
配置html-webpack-plugin
index.html无需导入<script src="/bundle.js"></script>
访问http://localhost:8080 直接打开的就是index.html
原理：html-webpack-plugin插件作用：
①通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。 ②HTML插件在生成的index.html页面，自动注入了打包的bundle.js 文件。6.devServer中常用的选项
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下:
注意:凡是修改了webpack.config.js 配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!
7.webpack中的loader(加载器)
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack 默认处理不了，需要调用loader加载器才可以正常打包，否则会报错! loader加载器的作用:协助webpack打包处理特定的文件模块。比如:- css-loader 可以打包处理.css相关的文件
- less-loader可以打包处理.less相关的文件
- url-loader file-loader 可以打包处理图片/文件
- babel-loader可以打包处理 webpack 无法处理的高级JS语法
(1)打包处理css/less文件
①安装cssloader
npm i style-loader@3.0.0 css-loader@5.2.6 less-loader@10.0.1 less@4.1.1 -D②在webpack.config.js 的module => rules数组中，添加loader规则如下:
其中，test表示匹配的文件类型，use表示对应要调用的loader，多个loader用数组，单个loader用字符串即可。
注意:- use数组中指定的loader顺序是固定的
loader调用过程：
src=>index.js
//1．使用ES6 导入语法，导入jQuery
import $ from ' jquery'
//导入样式(在 webpack中，一切皆模块)
//如果某个模块中，使用from接收到的成员为undefined，则没必要进行接收，即不要返回值,所以省略from
import './css/index.css'
import './css/index.less'
1. webpack 默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
2.由于代码中包含了index.css 这个文件。因此 webpack 默认处理不了
3.当webpack 发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的 loader 加载器。
4. webpack把 index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader),如果有less先交给less-loader,当less-loader处理完毕后会把处理的交过交给css-loader。
5.当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)
6.当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack。
7.webpack把 style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件。
(2)打包处理样式表中与url路径相关的文件
在src=>index.html中新建img标签
<img src="" alt="" class="Box">
在src=>index.js导入图片,并给img标签src属性动态赋值 import logo from './images/one.png' $('.Box').attr('src',logo)①运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D命令安装与url/文件相关的loader
在webpack.config.js的module => rules数组中，添加loader规则如下:
其中?之后的是 loader的参数项:
limit用来指定图片的大小，单位是字节( byte) 只有≤limit大小的图片，才会被转为base64格式的图片(3)打包处理js 文件中的高级语法
webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js 语法，需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码: 在src=>index.js新增代码如下：
①安装babel loader相关的包
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
②配置babel loader相关的包
步骤一：在webpack.config.js的module => rules数组中，添加loader规则如下: 注意:必须使用exclude指定排除项;因为 node_modules目录下的第三方包不需要被打包
步骤二：在项目根目录下，创建名为babel.config.js 的配置文件，定义babel的配置项如下:
8.配置webpack的打包发布
在package.json的文件scripts节点下，新增build命令如下:
--model是一个参数项，用来指定webpack的运行模式，值为production， 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意:在package.json的文件scripts节点下通过--model指定的参数项，会覆盖webpack.config.js 中的model对象。在webpack.config.js配置文件的output节点中，进行如下的配置:
将filenmae的路径前面加个js/
修改webpack.config.js 中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径:
(3)配置和使用clean-webpack-plugin插件自动删除dist目录
为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin 插件:
npm i clean-webpack-plugin@3.0.0 -D
②在webpack.config.js按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
③把创建的cleanPlugin 插件实例对象，挂载到plugins节点
9.source Map
什么是Source Map
Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
(1)webpack开发环境下的Source Map
默认 Source Map 的问题
开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。示意图如下:
开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致:
(2) webpack 生产环境下的Source Map
在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图之人。
（3）Source Map的最佳实践
①开发环境下:
●建议把devtool的值设置为eval-source-map
●好处:可以精准定位到具体的错误行
②生产环境下:
●建议关闭Source Map或将devtool的值设置为nosources-source-map
●好处:防止源码泄露，提高网站的安全性
10.webpack中@的原理和好处
配置：在webpack.config.js配置如下：
11.实际开发中需要自己配置webpack 吗?
答案:不需要!
●实际开发中会使命令行工具（俗称CLI）一键生成带有webpack的项目
●开箱即用，所有webpack 配置项都是现成的!
●我们只需要知道webpack 中的基本概念即可!
