浅谈Webpack模块打包工具一

为什么要使用模块打包工具

1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题

2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请求频繁问题

3.支持不同类型的资源模块

对于有兼容问题的代码,我们可以通过模块加载器（Loader）编译转化，代码拆分（按需加载）引入资源模块，比如import css,

打包工具解决的是前端整体的模块化 并不单指 JavaScript模块化，而是指对所有的资源进行模块化

webpack 配置文件

webpack4.0之后的版本支持0配置的情况进行打包,webpack默认打包的入口文件为src/index.js到dist/main.js,很多时候我们都需要

自定义路径，需要添加webpack的配置文件,在根目录下创建webpack.config.js,这个文件运行到node环境下,使用commonjs规范，

比如：指定入口文件及出口文件

webpack4新增了工作模式的功能，大大简化了webpack的复杂程度，针对不同环境的几组预设问题,如上图所示的简单配置中,没有

指定mode的属性，wenpack会按照production模式去工作,这对生成环境是很好的,但是没办法去阅读,因为代码压缩编译过了,

有三种模式

1.development开发模式 优化打包速度，代码中会添加一些调试辅助

2.none 模式 webpack运行最原始的打包 不会去做任何额外的处理

3.production模式

可以在配置文件中配置mode属性

WebPack 资源模块加载

上文中提到过webpack不仅是JS的模块打包工具，也是整个前端工程的模块化打包工具,也就是说我们可以引入前端项目中的任意类

型文件,但是webpack内部默认只会处理JavaScript文件,这时候我们需要配置loader处理对应的文件,下面尝试下打包css文件(正常开发

中不会以css为入口文件),安装下这个loader.

yarn add css-loader --dev   //css-loader作用是将我们css文件转化为js模块

yarn add style-loader --dev //style-loader是将转化的js模块展示到页面上

loader是webpack的核心特性,借助于loader就可以加载任何类型的资源

Webpack 导入资源模块

一般webpack的打包/运行入口是JS文件，因为javascript驱动整个前端应用的业务,然后在JS中以import的方式引入css,图片，文字等

及一切javaScript所需要的资源，这也是webpack的核心思想,保证所有必须的资源都能打包进去。

Webpack 文件资源加载器及 URL加载器

文件资源加载器:还有一些比较大的我们需要用到file-loader

yarn add file-loader --dev //处理体积比较大的图片字体等文件 安装依赖

在说url加载器之前先说下Data Urls是一种特殊的协议,他可以直接用来表示一个文件内容，在访问url时就不会访问任何的http请求,达

到减少http请求的效果,所以我们可以以代码的形式转化任何文件,这时候我们需要用到加载器url-loader,

yarn add url-loader --dev //通过url-loader转化为data url的形式。

url-loader适用于体积比较小的资源，因为体积比较大的资源会造成我们的打包结果非常大，从而影响运行速度，这里我们只需要把配

置文件中的file-loader，替换成url-loader

针对小文件使用url-loader,嵌入代码减少请求次数,针对大文件单独获取存放，提高加载速度用file-loader,file-loader和url-loader必须

要同时安装,虽然配置文件中是url-loader,如图所示当大于10KB时还是会运行file-loader(这里啰嗦下...)

Webpack js编译加载器

把ES2015等js代码的新特性编译成原生js

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

Webpack 模块加载方式

webpack遵循不同的导出和导入文件的标准,但是建议不要混淆，最好只使用一种标准

CSS中加载其它css的方式 @import url(xxx.css);

加载html的loader

yarn add html-loader --save

Webpack 核心工作原理

以JS为入口文件,通过require或者import的方式层层依赖 形成一个依赖树，递归依赖树找到对应的文件，找到对应的loader属性,找到

模块对应的加载器去加载模块，实现整个项目的打包,loader机制是Webpack的核心。

Webpack 开发一个Loader

首先创建一个.md文件about.md,创建一个markdown-loader.js文件,

由于webpack打包返回的结果必须为js代码，要么makedown解析模块导出结果交给下个模块,继续处理直到最终导出JS代码形式，要

么makedown导出后解析成字符串直接return出去

第一种方案

创建一个解析makedown的解析模块

yarn add marked --dev 安装解析makedown的模块，打包结果为html字符串

第二种方案

makedown打包结果传给html-loder

yarn add html-loader --dev html-loader

所以说loader就是一个从输入到输出的转换，对于同一个资源可以依次使用多个Loader