浅谈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

巴特西

浅谈Webpack模块打包工具一

最新文章

热门文章