通过Loader实现特殊资源加载

通过Loader实现特殊资源加载

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

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

如何加载模块

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

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

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

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

通过js加载资源模块

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

开发一个 Loader

深入了解loader的工作原理

开发markdown文件转换为html

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

image-20201112120025547.png

多个loader配合

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

你可能感兴趣的:(通过Loader实现特殊资源加载)