一、学习内容
1.webpack定义
[webpack官网](https://www.webpackjs.com/concepts/loaders/)
webpack is a **static module bundler** for modern JavaScript applications.
webpack是一个==静态的模块化打包工具==，为现代的JavaScript应用程序；
我们来对上面的解释进行拆解：
打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
## Vue项目加载的文件有哪些
2. JavaScript的打包
将ES6+转换成ES5的语法；
TypeScript的处理，将其转换成JavaScript；
### Css的处理：
CSS文件模块的加载、提取；Less、Sass等预处理器的处理；
### 资源文件img、font：
图片img文件的加载；
字体font文件的加载；
### HTML资源的处理：
打包HTML资源文件；
处理vue项目的SFC文件.vue文件；
3. 如何使用
> 目标: 把src下的2个js文件, 打包到1个js中, 并输出到默认dist目录下
默认入口: ./src/index.js
默认出口: ./dist/main.js
==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==
1. 初始化包环境
```bash
npm init -y
#文件夹名不要有中文 -y yes的缩写
```
2. 装JQuery
查看package.json文件
**dependencies**：项目依赖
**devDependencies**：开发过程中依赖的一些工具
**scripts**：指定了运行脚本命令的npm命令行缩写。
```bash
npm install jquery -S
```
**npm install -S 相当于 npm install --save** （写入dependencie 开发环境和生产环境都能用）**默认**
**npm install -D 相当于 npm install --save-dev** （写入devDependencies 开发环境）
**npm install -g** 全局安装 其他项目也可使用
◼ **npm的包通常需要遵从semver版本规范：**
semver：https://semver.org/lang/zh-CN/
npm semver：https://docs.npmjs.com/misc/semver
◼ **semver版本规范是X.Y.Z：**
X主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）；
Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）；
主号.次号.修补号
x.y.z：表示一个明确的版本号；
^x.y.z：表示x是保持不变的，y和z永远安装最新的版本；
~x.y.z：表示x和y保持不变的，z永远安装最新的版本
3. 新建文件夹==**src**==，新建文件==**index.html**和**index.js**==
1. 导入并使用JQ()
```js
import $ from 'jquery'
$(function(){
$('liadd').css('backgroundColor','pink')
$('li:even').css('backgroundColor','red')
})
```
此时预览页面会报错，因为不支持**es6的导入方式**
2. 安装依赖包：官网->中文文档->指南
```bash
npm install webpack webpack-cli -D
# -D 是 --save-dev 的简写，安装的插件写入devDependencies对象里面去（开发环境）
# -S 是 –-save 的简写，安装的插件写入dependencies对象里面去（生产环境）
```
3. 在项目==**根目录**==下手动创建并配置webpack：==**webpack.config.js**==（文件名固定）
```js
const path = require('path')
//node中导出模块
module.exports = {
mode:'development',//"development" | "production"
//mode: 打包模式 development/production
// development: 不会压缩打包后的JS代码,打包速度快
// production: 会自动压缩打包后的JS代码,打包速度慢
}
```
4. 在**package.json**中配置scripts(自定义命令)
```json
"scripts": {
"dev": "webpack" //script 节点下的脚本，可以通过 npm run dev执行 默认执行webpack.config.js,
//'dev':'webpack --config xx.config.js' 指定配置文件名
}
//dev 这是个别名
```
5. 运行命令：**npm run dev**
6. 构件完毕后多了文件夹**dist**，将index.js 的引用换成**dist/main.js**解决了兼容性问题
7. ```js
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
```
补充：
但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？
比如我们将webpack.config.js修改成了 wk.config.js；
这个时候我们可以通过 --config 来指定对应的配置文件；
webpack --config wk.config.js
4.加载器loader
webpack默认只能处理JS文件,不能处理其他文件,
因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外,
还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包,
在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块,
用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader
webpack中的loader都是用NodeJS编写的, 但是在企业开发中我们完全没有必要自己编写,
因为已经有众多大神帮我们编写好了企业中常用的loader, 我们只需要**安装、配置、使用即可**
loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；
module.rules的配置如下：
rules属性对应的值是一个数组：[Rule]
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
**test属性**：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
**use属性**：对应的值时一个数组：[UseEntry]
二、是否遇到问题
无
三、是否解决
|
