webpack加载器、demo和核心工作原理

webpack的核心特性

1.模块打包工具：它本身可以解决我们js的代码问题，我们可以通过webpack把零散的模块代码打包到同一个js文件里面

2.模块加载器（loader）：对于代码中有兼容的代码，我们可以在打包的过程中通过模块加载器进行编译转换

3.代码拆分的能力 ：把代码可以按照我们的需要打包，我们可以把应用加载过程中初次运行的所必须的模块都打包在一起，其他的模块我们可以单独存放，等实际中需要用到那个模块，我们再去异步加载这个模块，从而实现增量加载或者是渐进式加载，这样的话我们就不用担心文件太大/太碎这两个极端的问题。

4.支持在js中以模块化的方式去载入任意类型的资源

打包工具解决的事前端整体的模块化，不是指JavaScript的模块化

1.快速上手步骤

yarn init --yes
yarn add webpack webpack-cli --dev 安装开发依赖

yarn webpack --version可以看到webpack版本，就可以通过它打包src下面的js代码了
yarn webpack 一般情况下，会从src下面的index.js开始打包，打包完就会出现dist/main.js，里面存放的就是打包完之后的代码

webpack的配置文件：webpack.config.js

2.webpack的工作模式：

1. 生产模式下，自动优化打包生产结果
2. 开发模式下，自动优化打包速度，添加一些调试过程中的辅助
3. none模式下，运行最原始的打包，不做任何额外的处理

3.webpack的资源模块加载

4.webpack打包结果运行原理

1.资源模块加载

（1）处理css文件：需要配置适当的加载器loader来处理文件，webpack内部只能处理js

yarn add css-loader
yarn add style-loader：就是把css-loader转换之后的结果通过style标签追加到页面上，所以还需要安装style-loader，同时还要在webpack.config.js文件的rules里加上

demo：
入口文件是main.css


我们运行项目就可以看到我们的样式显示了出来

（2）webpack导入资源模块

demo：入口文件 是main.js

main.js：

main.css

heading.js

heading.css

运行出来结果：

我们会发现设置的两个css文件内容都生效了

（3）文件资源加载器（图片）

yarn add file-loader

编译完之后我们能看到在dist目录下会出现一张很长名字的图片，记得还要写上publicPath

Data URLs与url-loader：

yarn add url-loader
改一下webpack.config文件，会发现dist目录下就没有图片了

项目中的小文件通过data urls，减少请求次数

大文件就使用file-loader，单独存放

5.webpack常用加载器分类

1.编译转换类 转换成js代码（css-loader）

2.文件操作类：把我们加载到的资源模块拷贝到输出的目录，同时又将这个文件的访问路径向外导出（file-loader）

3.代码检查类：对于代码质量检查的加载器（eslint-loader）

6.webpack与ES2015

一些ES6新特性其实并不能被打包转换，我们需要babel-loader

yarn add babel-loader @babel/core @babel/preset-env --dev

我们需要为babel-loader配置他所需要的插件，这个集合里面包含了全部的ES最新特性

7.webpack加载资源的方式

8.webpack核心工作原理：

在我们的项目当中，一般都会散落着各种各样的代码及资源文件。那webpack会根据我们的配置找到其中的一个文件作为打包的入口。那一般情况下，这个文件都会是一个JavaScript的文件。

然后它会去顺着我们入口文件当中的代码，根据代码中出现的import或者像require之类的语句，然后解析推断出来这个文件所依赖的资源模块。然后分别去解析每个资源模块对应的依赖，那最后就形成了整个项目中所有用到文件之间的一个依赖关系的一个依赖树。

有了这个依赖关系树过后，webpack会递归这个依赖树，然后找到每个节点所对应的资源文件。最后再根据我们配置文件当中的rules属性去找到这个模块所对应的加载器，然后交给对应的加载器去加载这个模块。

那最后会将加载到的结果放入到bounder.js，也就是我们的打包结果当中。从而去实现我们整个项目的打包。那整个过程当中loader的机制其实起了很重要的一个作用，因为如果没有loader的话，它就没有办法去实现各种各样资源文件的加载。