webpack 资源模块加载

webpack内部(内部loader)默认只会处理Javascript文件&＃xff0c;也就是说它会把打包过程中所有遇到的文件当作Javascript文件去解析。

可以为其他类型的文件添加不同的加载器(loader)。

loader

loader是webpack实现整个前端模块化的核心&＃xff0c;借助于loader就可以加载任何类型的资源。

安装loader&＃xff0c;然后在配置文件中的module属性下配置rules数组。

rules 是针对其他资源模块的加载规则的配置。

每个规则对象&＃xff0c;都需要设置两个属性&＃xff1a;

• test&＃xff1a;一个正则表达式&＃xff0c;用于匹配打包过程中遇到的文件路径
• use&＃xff1a;用于指定匹配到的文件需要使用的loader
  • 可以配置loader模块名称&＃xff0c;也可以配置loader相对路径&＃xff0c;原理同require函数
    • use: &＃39;css-loader&＃39;使用npm上的loader模块
    • use: &＃39;./xxx-loader&＃39;使用自定义的.js文件的相对路径
  • 如何配置了多个loader(数组)&＃xff0c;执行顺序是从后向前

一些插件介绍&＃xff1a;

1. css-loader
   1. 将css文件转换称一个js模块&＃xff0c;具体实现是&＃xff1a;
      1. 将css代码push到一个数组当中
   2. 但是整个过程中&＃xff0c;并没有使用到这个数组
   3. 还需要一个style-loader去使用它
2. style-loader
   1. 将css-loader转换后的结果&＃xff0c;通过style标签的形式追加到页面上
3. html-loader
   1. 使webpack识别.html的模块

webpack 导入资源模块

虽然可以通过loader将任何类型的资源作为入口去打包。

但webpack一般还是将Javascript作为打包入口。

打包入口可以说是项目的运行入口。

webpack建议&＃xff1a;

1. 编写代码过程中&＃xff0c;根据代码的需要&＃xff0c;动态导入资源
2. 需要资源的不是应用&＃xff0c;而是代码

目前而言&＃xff0c;Javascript代码负责完成整个应用的业务功能。Javascript驱动前端应用的业务。

在实现业务的过程中&＃xff0c;需要其他类型的资源(例如样式、图片)。

webpack建立Javascript和资源的依赖关系的目的&＃xff1a;

1. 逻辑合理&＃xff0c;JS确实需要这些资源文件
2. 确保上线资源不缺失&＃xff0c;都是必要的

webpack 文件资源加载器

大部分loader都类似css-loader&＃xff0c;都是将资源模块转换为JS代码的实现方式。

还有一部分(例如 图片 字体)不能通过JS的方式去表示的资源&＃xff0c;需要用到文件资源加载器&＃xff0c;例如file-loader。

webpack默认将输出目录作为网站的根目录&＃xff0c;所以资源的路径默认以dist为根目录。

通过配置publicPath&＃xff0c;告诉webpack打包的文件在网站中的位置&＃xff0c;默认为空&＃39;&＃39;及网站根目录。

例如&＃xff1a;publicPath: &＃39;dist/&＃39;&＃xff0c;注意/不能省略。

publicPath即打包后文件中webpack使用的变量__webpack_require__.p。

使用图片时&＃xff0c;它拼接在图片路径前&＃xff0c;即__webpack_require__.p &＃43; imgSrc&＃xff0c;所以/不能省略。

总结

webpack 在打包时遇到图片等文件&＃xff0c;根据配置匹配对应的文件加载器&＃xff0c;先将文件拷贝到输出目录&＃xff0c;然后将输出的文件的路径&＃xff0c;作为返回值返回&＃xff0c;从而可以通过import拿到访问这个文件的路径。

webpack URL 加载器

除了file-loader 这种通过拷贝文件的方式去处理文件资源以外&＃xff0c;还有一种通过 Data URLs 表示文件的常见方式。

Data URLs

传统的URL一般要求服务器有一个对应的文件&＃xff0c;然后通过请求这个地址得到服务器上的这个文件。

Data URLs 是特殊的URL协议&＃xff0c;它可以直接表示一个文件的内容&＃xff0c;即url中的文本已经包含了文件的内容。

所以使用Data URLs时就不会再发送HTTP请求。

data:[][;base64],

• data: 协议
• [][;base64], 媒体类型和编码
• 文件内容

例如&＃xff1a;data:text/html;charset&＃61;UTF-8,

html content

可以通过浏览器打开这个地址查看效果。

而如果是图片或字体这种无法直接通过文本去表示的二进制类型的文件&＃xff0c;可以通过将文件的内容进行base64编码&＃xff0c;然后以编码后的字符串去表示文件的内容。

例如&＃xff1a;data:image/png;base64,iVBORw0KGg...

表示base64编码的png类型的文件。

通过Data URLs可以表示任意类型的文件。

url-loader

file-loader通过拷贝的方式打包文件&＃xff0c;最终返回输出文件的路径。

url-loader将文件转换为Data URLs&＃xff0c;最终返回一个完整的 Data URLs类型的url地址&＃xff0c;不会输出独立的物理文件。

最佳实践

• 小文件使用Data URLs&＃xff0c;减少请求次数
• 大文件单独提取存放(传统方式)&＃xff0c;提高加载速度(Data URLs表示大文件内容过大)

每个loader加载器都有options配置选项。

通过配置url-loader的limit(字节上限)实现最佳实践。

• 超出limit的文件单独提取存放(调用file-loader加载器)
• 小于limit的文件转换为Data URLs嵌入代码

注意&＃xff1a;如果url-loader配置了limit&＃xff0c;大文件是使用file-loader加载器处理的&＃xff0c;所以需要安装它依赖的file-loader。

常用加载器分类

• 编译转换类
  • 把加载到的模块&＃xff0c;转换为Javascript代码
  • 例如 css-loader
• 文件操作类
  • 把加载到的资源模块&＃xff0c;拷贝到输出的目录
  • 同时导出文件的访问路径
  • 例如 file-loader
• 代码检查类
  • 对代码加载的文件中的代码进行校验
  • 目的&＃xff1a;统一代码风格&＃xff0c;从而提高代码质量
  • 一般不会修改生产环境的代码
  • 例如 eslint-loader

webpack 处理 ES2015

webpack默认就能处理代码当中的 import和export&＃xff0c;但这不表示webpack会自动编译ES6的代码。

因为模块打包需要&＃xff0c;所以webpack对代码中的import和export作了相应的转换。

webpack并不能转换代码中其他的ES6特性。

如果需要webpack处理代码中其他ES6特性的转换&＃xff0c;就需要为JS文件配置一个额外的编译类型的loader&＃xff0c;例如常见的babel-loader

babel-loader依赖额外的babel的核心模块&＃64;babel/core

另外可以安装一个babel的插件集合(预设)&＃64;babel/preset-env

babel只是转换JS代码的一个平台&＃xff0c;我们需要基于这个平台&＃xff0c;通过不同的插件去转换代码中具体的特性。

所以需要配置babel要使用的插件。

• webpack只是打包工具&＃xff0c;不会处理代码中的ES6的新特性
• 通过配置加载器实现编译转换代码

webpack 模块加载方式

除了代码中的import可以触发模块的加载&＃xff0c;webpack还提供了其他几种方式&＃xff1a;

• 遵循 ES Modules 标准的import声明
• 遵循 CommonJS 标准的require函数
  • 注&＃xff1a;如果require一个 ESM 的模块&＃xff0c;需要通过require().default 获取 ESM 模块的默认属性
• 遵循 AMD 标准的define函数和require函数

建议&＃xff1a;除非必要情况&＃xff0c;否则不要再项目中混合使用这几种标准。

webpack除了以上3个方式&＃xff0c;loader加载的非Javascript也会触发资源加载。&＃xff08;一些独立的加载器&＃xff0c;在工作时也会处理所加载到的资源当中导入的模块&＃xff09;

例如

• css-loader加载的css文件&＃xff08;样式代码中&＃64;import指令和url函数&＃xff09;
• html代码的图片标签的src属性&＃xff0c;a标签的href属性
  • 使用html-loader

html-loader默认只会处理html中的src属性&＃xff0c;如果要实现其他标签的属性也能触发webpack打包&＃xff0c;需要为加载器添加一些相应配置。

代码中所有引用到的资源&＃xff08;有引用资源可能性的地方&＃xff09;都会被webpack找到&＃xff0c;然后根据配置交给对应的loader去处理&＃xff0c;最后将处理的结果整体打包到输出目录。

webpack就是依据这样的特点&＃xff0c;去实现整个项目的模块化。

webpack 核心工作原理

在项目中一般都会散落着各种各样的代码及资源文件(.js .html .css .png .json .scss…)。

webpack会根据配置找到其中的一个文件作为打包入口(entry)&＃xff0c;一般是一个Javascript文件。

然后它会顺着入口文件的代码&＃xff0c;根据代码中出现的import或require之类的语句&＃xff0c;解析推断出这个资源所依赖的模块。

然后分别再解析每个模块对应的依赖。

最后形成了整个项目中&＃xff0c;所有用到的文件之间的依赖关系的依赖树。

webpack会递归这个依赖树&＃xff0c;找到每个节点对应的资源文件。

最后根据配置文件中的rules属性&＃xff0c;找到模块对应的加载器去加载这个模块。

最后会将加载到的结果&＃xff0c;放到打包文件bundle.js中&＃xff0c;从而实现整个项目的打包。

Loader机制是webpack的核心。
如果没有Loader&＃xff0c;webpack就没有办法实现各种资源文件的加载&＃xff0c;而只是打包合并JS代码的工具。

webpack Loader的工作原理

开发一个loader

开发一个markdown文件加载器&＃xff08;markdown-loader&＃xff09;&＃xff0c;实现在代码中直接导入markdown文件。

原理&＃xff1a;将md内容转换为html呈现到页面中。

起步

1. 创建一个loader的js文件&＃xff0c;编写内容

2. 每个loader都需要导出一个函数&＃xff0c;这个函数是loader对所加载到的资源的处理过程。

   1. 输入&＃xff1a;就是资源所加载到的内容&＃xff0c;参数source接收
   2. 输出&＃xff1a;return处理后的结果

3. 在webpack配置文件中配置rules&＃xff0c;使用这个loader

// markdown-loader.js
module.exports &＃61; source &＃61;> {console.log(source)return &＃39;hello ~&＃39;
}// webpack.config.js
module.exports &＃61; source &＃61;> {module: {rules: [{test: /.md$/,use: &＃39;./markdown-loader&＃39;, // 同require一样可以指定相对路径}]}
}


此时执行打包命令&＃xff0c;会报错You may need an additional loader to handle the result of these loaders.

“你可能需要一个额外的loader去处理这个自定义加载器的结果”。

webpack加载资源的过程&＃xff0c;类似于一个工作管道&＃xff0c;可以在这个过程中依次使用多个loader。

Source &＃61;> loader1 -> loader2 -> loaderx &＃61;> Result

但是它要求最终这个管道工作过后的结果&＃xff0c;必须是一段Javascript代码。

而上面的loader返回的是hello ~&＃xff0c;它不是Javascript代码&＃xff0c;所以才会出现这个错误提示。

解决办法&＃xff1a;

1. 直接返回Javascript代码
   1. 例如 return &＃39;exports default "hello ~"&＃39;
2. 或者找一个合适的loader继续处理markdown-loader处理的结果

使用合适的loader处理

继续完善功能&＃xff0c;安装markdown解析模块marked&＃xff0c;yarn add marked --dev

该模块可以解析md内容&＃xff0c;并返回一个字符串。

markdown-loader仍然返回解析后的html字符串&＃xff0c;将结果交给下一个loader处理。

const market &＃61; require(&＃39;market&＃39;)
module.exports &＃61; source &＃61;> {const html &＃61; market(source)return html
}


安装用于加载html的loader&＃xff08;html-loader&＃xff09;。

将这个加载器&＃xff0c;配置在markdown-loader的后面执行&＃xff08;代码中位置靠前&＃xff09;。

总结

• Loader负责资源文件从输入到输出的转换。
• Loader实际上是一种管道的概念&＃xff0c;对于同一个资源可以依次使用多个Loader&＃xff0c;将此次loader返回的结果交给下一个loader处理。
  • 例如 上面的 markdown-loader -> html-loader
  • 以及处理样式的 css-loader -> style-loader