通过Loader实现特殊资源加载

通过Loader实现特殊资源加载

loader是webpack实现整个项目的模块化,项目中各种资源都需要被管理

实现不同资源加载的核心是loader

如何加载模块

通过css-loader加载css资源，webpack使用loader处理模块，内部loader只能处理js模块

css文件经过css-loader打包之后再由webpack打包

css-loader 只会把 CSS 模块加载到 JS 代码中，而并不会使用这个模块，需要在添加额外的style-loader才能正常工作

image-20201112104146536.png loader是webpack实现前端模块化的核心，只有通过不同的loader，才能实现任何类型资源的加载

通过js加载资源模块

一般webpack入口都是js文件，打包入口就是应用的运行入口

开发一个 Loader

深入了解loader的工作原理

开发markdown文件转换为html

webpack资源加载类似工作管道，可以使用多个loader，输出结果必须是标准的js代码

image-20201112120025547.png

多个loader配合

首先使用自己的loader转换为html文件，再次使用html-loader转换为js代码 例子