#### 加载 jQuery包

npm i jquery -S -S(让包在dependencies下)

淘宝镜像安装包：npm config set registry registry.npm.taobao.org

一、开发和部署上线都需要用到的包安装在-S下 （--save） 二、只在开发阶段需要用的包安装在-D下 (--save-dev)

插件

• 插件：npm install webpack-dev-server -D 自动保存

• 插件：npm install html-webpack-plugin@5.3.2 -D 直接进入index.html （除了可以复制页面，还可以引入内存的bundle.js）

• 插件： npm i style-loader css-loader -D

• 插件：npm i less-loader less -D

• 插件：npm i url-loader file-loader -D

• 插件: npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D (处理js高级语法)

• 插件：npm install --save -dev clean-webpack-plugin -D自动清理dist的旧文件

loader

1. webpack默认只能打包处理.js结尾的文件
2. 由于代码中包含了index.css文件，因此weback处理不了
3. 3.当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器。
4. webpack把index.css这个文件，先转交给 最后一个loader进行处理（css-loader）
5. 当css-loader处理完必之后，会把处理的结果，转交给下一个loader(style-loader)
6. 当stye-loader处理完毕之后，发现前面没有下一个loader了，于是就把处理的结果转交给webpack
7. webpack把syle-loader 处理的结果，合并到/dist/bundle.js中，最终稿生成打包好的文件.

（小图片小logo）base64图片转换（可以减少一次请求->提高性能）