Webpack 原理与实践之如何通过 Loader 加载器进行资源加载?

开发 前端
我们知道webpack其实不仅是javascript模块打包工具,更是整个前端项目即前端工程的模块打包工具,可以通过webpack去管理前端项目中任意类型的资源文件。

[[440887]]

写在前面

我们知道webpack其实不仅是javascript模块打包工具,更是整个前端项目即前端工程的模块打包工具,可以通过webpack去管理前端项目中任意类型的资源文件。

如何加载资源模块

首先,我们在项目的src目录下添加一个样式文件main.css。目录结构如下:

  1. |--03-loader  
  2.   |--src 
  3.     |--main.css 
  4.   |--package.json 
  5.   |--webpack.config.js 
  1. /* main.css */ 
  2. body{ 
  3.   margin:0 auto; 
  4.   padding:0 20px; 
  5.   max-width:800px; 
  6.   background:yellow; 

接下来,在webpack.config.js配置中的入口文件路径进行更改为main.css文件路径,执行webpack直接进行打包css资源文件。

  1. const path = require("path"
  2.  
  3. module.exports = { 
  4.   // 样式文件路径 
  5.   entry:"src/main.css"
  6.   output:{ 
  7.     filename:"bundle.js"
  8.     path:path.join(__dirname,"output"
  9.   }, 
  10.   mode:"none" 

如果我们不进行其他的任何配置,此时直接执行打包命令,会报错提示我们报错,因为只能是使用js文件作为打包入口。之所以会这样,那是因为在webpack中默认解析的是js语法,而对于非js语法需要先进行Loader,再在配置文件中另外进行配置loader。

css文件通过css-loader进行处理,再提交给webpack进行打包生成js文件。

  1. $ npm i css-loader -D 

但是,当你此时执行打包命令后,尝试在你页面中使用生成bundle.js文件,会发现刚刚的main.css模块并没有起作用,那么我们需要额外添加一个style-lodaer加载器,这样就能正常工作了。样式没有生效的原因是:css-loader只会把css模块加载到js代码中,而不会直接使用此模块。

那么,在你安装完style-lodaer后,将配置文件中的use属性修改为数组,将style-lodaer也配置进去。因为loader数组的加载顺序是自下而上的,所以style-lodaer应该配置在css-loader上面。

  1. //main.js 
  2. import "./style.css" 
  3.  
  4. console.log("hello yichuan"); 
  1. /* style.css */ 
  2. body{ 
  3.   margin:0 auto; 
  4.   padding:0 20px; 
  5.   max-width:800px; 
  6.   background:yellow; 

loader加载器是整个webpack打包配置的核心,因为需要通过它去实现任意类型文件的打包,这样最后都进行打包生成了js文件。

那么,为什么webpack要在js中载入css文件,而不是将样式文件和行为进行分离?

这是因为,真正需要其他资源的并不是整个项目中,而是某个模块需要使用。

假设在进行页面开发某个局部功能时,需要使用到一个样式模块和一个图片文件,如果你还是将这些资源单独引入到html文件中,然后再到js中添加对应的逻辑代码,试想如果后期不需要这个局部功能,那么就需要同时删除JS中的代码和html中的资源文件引入,也就是需要同时维护多条线。然而,此时你遵循webapck的导入设计,所有资源加载都是通过js代码控制,那么后期只需要维护js代码就行。

为什么要建立这种JS文件导入其他资源的依赖关系,这是因为:

逻辑上比较合理:因为JS确实需要这些资源文件配合才能实现整体功能

配合webapck这类工具的打包:能够确保在上线时,资源不会缺失,而且都是必要的。

接下来,我们进行简易的loader开发,目标是实现对md文件的打包。

  1. // index.js 
  2. import mrakdown from "hello.md" 
  1. <!-- hello.md --> 
  2. ## 你好呀 
  1. //md-loader.js 
  2. const md = require("./hello.md"
  3.  
  4. module.exports = source => { 
  5.   // 加载到的模块内容 
  6.   console.log("加载到的模块内容==>",source); 
  7.   // 返回值就是最终打包的结果 
  8.   return "你好呀" 
  1. //webpack.config.js 
  2. const path = require("path"
  3. module.exports = { 
  4.   // 样式文件路径 
  5.   entry:"./src/index.js"
  6.   output:{ 
  7.     filename:"bundle.js" 
  8.   }, 
  9.   mode:"none"
  10.   module:{ 
  11.     rules:[{ 
  12.       test:/\.md$/,//根据打包过程中所遇文件路径记性匹配是否使用此loader 
  13.       use:"./md-loader"//指定具体使用的loader 
  14.     }] 
  15.   } 

此时执行打包命令后报错,提示我们加载对应的loader。这是因为打包的每个loader形成一个链条,每个loader都依赖于另一个loader的引入,最终打包出来的必须是js文件。对此,我们有处理方法:

  • 将我们自定义的md-laoder加载器的输出设置为js语法
  • 安装对应的loader加载器
  1. module.exports = source => { 
  2.   // 加载到的模块内容 
  3.   console.log("加载到的模块内容==>",source); 
  4.   // 返回值就是最终打包的结果 
  5.   return "console.log('你好呀')"

那么当我们使用合适的Loader加载器将md文件解析为html模块,需要先进行安装marked,安装完后在md-loader.js导入模块,然后进行解析。

  1. $ npm i marked 
  1. //./md-loader.js 
  2. const marked = require("marked"
  3.  
  4. module.exports = source => { 
  5.   // 1.将md文件转为html字符串 
  6.   const html = marked(source); 
  7.   return `export default ${JSON.stringify(html)}` 

参考文章

《webpack原理与实践》

《webpack中文文档》

写在最后

 

loader机制是webpack核心内容,因为有了loader机制webpack才能足以支撑整个前端项目模块化,实现通过webpack去加载任何想要的资源。

 

责任编辑:武晓燕 来源: 前端万有引力
相关推荐

2021-05-31 05:36:43

WebpackJavaScript 前端

2021-12-20 00:03:38

Webpack运行机制

2021-12-16 22:02:28

webpack原理模块化

2021-12-24 08:01:44

Webpack优化打包

2020-12-03 10:40:23

webpack加载原理前端

2021-12-15 23:42:56

Webpack原理实践

2021-12-22 22:44:49

Webpack热替换模块

2017-11-21 14:56:59

2021-12-19 07:21:48

Webpack 前端插件机制

2021-12-25 22:29:04

WebpackRollup 前端

2017-08-03 12:50:49

Web图片资源浏览器

2023-10-25 10:21:24

浏览器HTTP请求

2021-10-24 06:50:52

AndroidClassLoaderJava

2021-01-07 07:52:04

浏览器网页资源加载

2009-10-27 10:28:33

Silverlight

2021-03-19 06:31:06

vue-lazyloa图片懒加载项目

2017-03-28 10:11:12

Webpack 2React加载

2017-03-24 10:56:21

Webpack技巧建议

2017-05-02 16:29:11

Webpack技巧建议

2021-12-21 14:00:25

WebpackDevServer的开发
点赞
收藏

51CTO技术栈公众号