1.为什么要用webpack
今天学习了webpack的基本使用概念，这是一个打包工具，首先我们要知道为什么需要打包工具。
在开发时，我们会使用框架react，vue，ES6模块化瘀法，less/sass等css预处理器等语法进行开发，这样的代码要想在浏览器运行，必须经过编译成浏览器可以识别的js，css等语法才能运行。而打包不仅帮我们完成这些，还可以压缩代码，兼容性处理，提升代码性能。
2.配置webpack
webpack可以帮助我们编译ES Module语法，生成环境下还需要压缩js代码。我们首先安装webpack库，在根目录输入命令npm install webpack@5 webpack-cli@5 -D。
安装完之后就可以去配置我们的webpack文件了。
图就是我们配置的webpack文件的骨架，其中有五个属性，entry入口，这里我们写的路径是我们的入口文件，也就是我们所有模块语法组件都引入到一个文件，这个就是入口文件。output就是我们打包之后输出到的文件目录。
这里的path指定了我们要把打包后的文件放在我们当前项目文件夹中的dist文件夹，然后输出到static/js/main.js，clean：true是我们每次打包自带删除前一次打包的内容。
这里配置的是加载器，首先加载器是因为webpack本身只能去处理js,json等资源，而css和图片，html都需要借助loader加载器去解析。
如图就是一个加载器，我们需要去官方文档搜索css加载器，然后终端输入安装命令，npm install --save-dev css-loader 然后就可以使用了，test只得是检测文件后缀，比如这里是.css那么就会去监测所有的css文件，然后用css-loader加载器解析css文件然后编译成common.js模块到打包的js文件中。这里MiniCssExtractPlugin.loader代替了原本的style.loader
然后在用style-loader加载器去把js中的css通过创建style标签添加到html文件中生效。这就是配置加载器的过程。首先安装，然后配置文件中使用。如果解析less sass等
只是改变文件后缀名和多一个less加载器就好。
还有就是图片和视频等资源，这些加载器内置到了webpack里面，我们只需要直接使用就可以。
在配置加载器我们还可以加一些parserOptions，比如在这里我们加了一个选项，小于10kb的图片会被转化为base64字符串格式，可以减少请求数量，体积会变大，适用于体积小的图片。
我们配置小图标或者音频的时候
不需要安装加载器，可以直接使用，这里type/resource是表明不需要进行额外的处理。直接打包就好，然后这里filename指名打包后存放的文件夹目录。
这是其他资源的加载器处理，我们还需要反过头来处理js资源，因为webpack对js处理是有限的，只能编译ES模块化语法，不能编译其他语法，导致js不能在其他浏览器运行，我们希望做一些兼容性处理以及代码格式的要求。
首先我们用eslint规范代码格式，可组装的js和jsx检查工具，检测js和jsx语法是否符合我们规定，里面是各种rules规则。
npm install eslint-webpack-plugin eslint --save-dev安装eslint 插件以及eslint （检查代码格式比如jsx）,首先安装对应插件和eslint，然后我们就来到webpack配置第四项，插件的配置。我们首先去文档安装插件，然后根据文档去引入以及配置插件文件，就可以使用了。
首先引入插件，然后插件都是封装好的构造函数，我们用new去调用。context指定我们规范监测的js文件都是src路径下的文件。然后就可以去配置.eslintrc.js具体决定怎么去规范了。
首先继承eslint默认的规范，然后rules是我们自己去写的规范，我们这里声明禁止使用var去声明变量。然后我们在打包运行的时候用到了var就会报错，这里报错等级是2.所以会停止运行项目。
规范完了就可以去解决兼容性问题，首先babel是js编译器，把我们写的jsx es6转化为旧版语法es5，兼容旧版本浏览器。只是做语法转换。
在这里我们需要用babel-loader插件，在打包js过程中自动调用babel对代码进行转化。
也就是说兼容 就是用babel插件去扩展babel的功能。这里是加载器中使用。
首先执行npm install babel-loader @babel/core @babel/present-env -D,babel本身以及babel-loader都需要单独安装然后才可以使用。
在这里我们对后缀名所有为.js的文件都进行编译，除了/node-modules/中的文件。
然后再babel配置文件presets预设置编译的语法为@babel/preset-env这里是能够编译ES6语法。也就是babel会根据@babel/preset-env把我们写的ES6语法转化为ES5语法，兼容旧版本浏览器。
还可以安装devServer开发服务器，这样我们就不需要打包，在我们启动开发服务器的时候自动在内存中打包然后运行。也是安装后使用。
这样就可以直接输入 npx webpack serve直接通过开发服务器运行。
最后一个就是mode，模式分为开发模式和生产模式，我们在开发的时候配置的是开发模式，生产的时候自然重新配置生产模式。但是基本是一样的。比如生产需要打包开发不需要打包。我们就在output 输出的时候 path写为undefined就可以了。然后根据我们想要运行的模式运行项目的时候用不同的配置文件。
比如开发的时候我们用npx webpack serve --config ./config/webpack.dev.js生产环境打包就要有用npx webpack --config ./config/webpack.prod.js
大概webpack基础配置就是这五个属性。插件需要安装引入然后new调用，加载器安装后设置text去规定监测的文件，然后直接用安装的加载器解析对应的文件。devServer是开发的时候帮我们省略打包。其他还有各种便于开发的插件我们想用的时候去文档里面找就可以了。