文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 12:40

关注

如何加载资源模块

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

  1. |--03-loader  
  2.   |--src 
  3.     |--main.css 
  4.   |--package.json 
  5.   |--webpack.config.js 
  1.  
  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.  
  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文件。对此,我们有处理方法:

  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去加载任何想要的资源。

 

来源:前端万有引力内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯