webpack想实现整个项目的模块化，所以就需要考虑项目中的各种资源如何管理；
即webpack不只是JS模块打包工具，它是整个前端工程的模块打包工具，通过它可以管理项目中任意类型的资源文件；
webpack实现不同类型资源模块加载的核心是Loader机制
目前，我们想了解webpack是怎么加载资源模块的，所以通过打包一个CSS文件去入手
webpack是用Loader（加载器）来处理每个模块的，不同文件的处理用不同的加载器；默认的Loader只能处理JS模块代码
因此打包CSS文件，需要一个CSS Loader，最常用的是css-loader，所以通过npm或yarn去安装；
$ npm install css-loader --save-dev
// 或者用yarn安装
$ yarn add css-loader --dev
然后在webpack.config.js里的module属性中添加一个rules数组，这个数组就是针对资源模块的加载规则配置；
每条规则是一个对象，包含两个属性；
-
首先是 test 属性，它是一个正则表达式，用来匹配打包过程中所遇到文件路径，这里我们是以 .css 结尾；
-
然后是 use 属性，它用来指定匹配到的文件需要使用的 loader，这里用到的是 css-loader；
这时候在重新打包CSS代码就不会报错了，因为CSS文件会交给css-loader处理过后再给webpack打包
CSS加载打包流程
但这时候你尝试在页面中使用这里输出的bundle.js文件，会发现main.css模块并没有工作；
如何处理？很简单，只需要额外再添加一个style-loader，样式就能工作。
但，为什么？
因为css-loader的作用是将CSS模块加载到JS代码中，而不会使用这个模块；
所以还需要在css-loader基础上，在使用一个style-loader，这个加载器挂载css-loader解析内容到style标签下，并且将style标签加入到html文档中
安装完 style-loader 之后，我们将配置文件中的 use 属性修改为一个数组，将 style-loader 也放进去。
这里需要注意的是，一旦配置多个 Loader，执行顺序是从后往前执行的，所以这里一定要将 css-loader 放在最后，因为要 css-loader 先把 CSS 代码转换为 JS 模块，才可以正常打包
配置完成之后，再次回到命令行重新打包；
style-loader 的作用总结一句话就是，将 css-loader 中所加载到的所有样式模块，通过创建 style 标签的方式添加到页面上。
以上就是我们对 Loader 使用的一些探索，Loader 是 Webpack 实现整个前端模块化的核心。因为只有通过不同的 Loader，Webpack 才可以实现任何类型资源的加载。
目前前端应用中的业务时JS驱动的，所以更合理的做法还是吧JS文件作为打包入口，然后JS代码里通过import语句去加载CSS文件；
事例项目结构
webpack Loader加载逻辑
即便是通过 JS 代码去加载的 CSS 模块，css-loader 和 style-loader 仍然可以正常工作。因为 Webpack 在打包过程中会循环遍历每个模块，然后根据配置将每个遇到的模块交给对应的 Loader 去处理，最后再将处理完的结果打包到一起。
为什么要在JS中加载其他资源？不应该样式和行为分离吗？
webpack的设计思路，不仅建议我们在js里引入css，还建议我们在js代码里引入当前业务所需要的任何资源文件；因为真正需要这个资源的并不是整个应用，而只是当前你正在写的代码需要这个资源；
可能你乍一想好像不太容易理解，那你可以做一个假设：我们在开发页面上的某个局部功能时，需要用到一个样式模块和一个图片文件。
如果你还是将这些资源文件单独引入到 HTML 中，然后再到 JS 中添加对应的逻辑代码。试想一下，如果后期这个局部功能不用了，你就需要同时删除 JS 中的代码和 HTML 中的资源文件引入，也就是同时需要维护这两条线。
而如果你遵照 Webpack 的这种设计，所有资源的加载都是由 JS 代码控制，后期也就只需要维护 JS 代码这一条线了。
开发一个Loader：
Loader虽然是Webpack的核心机制，但内部工作原理十分简单；
下面以自己开发一个加载markdown文件的加载器，深入了解Loader工作原理；
我们都应该知道 markdown 一般是需要转换为 html 之后再呈现到页面上的，所以我希望导入 md 文件后，直接得到 markdown 转换后的 html 字符串，如下图所示：
Loader加载器预期作用
为了直观演示，就不再单独创建一个npm模块，而是直接根目录下创建一个markdown-loader.js文件，完成后你可以把这个模块发布到npm上作为一个独立模块使用；
项目结构
每个 Webpack 的 Loader 都需要导出一个函数，这个函数就是我们这个 Loader 对资源的处理过程，它的输入就是加载到的资源文件内容，输出就是我们加工后的结果。
通过source参数接收输入，通过返回值输出；
完成后，回到webpack.config.js里配置加载器规则，匹配一个.md后缀对应到我们现在写的这个markdown-loader模块
image.png
TIPS：这里的 use 中不仅可以使用模块名称，还可以使用模块文件路径，这点与 Node 中的 require 函数是一样的。
配置完成后，打包
ERROR报错信息
上面console了md文件中的内容，但是最下面有一个ERROR
You may need an additional loader to handle the result of these loaders.（你可能还需要一个额外的加载器来处理当前加载器的结果）
为什么？
其实 Webpack 加载资源文件的过程类似于一个工作管道，你可以在这个过程中依次使用多个 Loader，但是最终这个管道结束过后的结果必须是一段标准的 JS 代码字符串，而我们markdown-loader.js文件return的是一段字符串。
所以此时有两种解决办法
-
直接在这个 Loader 的最后返回一段 JS 代码字符串；
-
再找一个合适的加载器，在后面接着处理我们这里得到的结果。
第一种办法，把返回一个字符串改为console语句，然后打包
报错解决
此时ERROR报错没了，这个模块逻辑很简单，运行打包文件之后，就是输出一个字符串；
刚才报错的原因就是Loader管道最后必须返回JS代码，随便返回一个内容是行不通的；
接下来实现Loader逻辑
现在需要安装一个能够将 Markdown 解析为 HTML 的模块，叫作 marked。
npm安装完成后，我们在 markdown-loader.js 中导入这个模块，然后使用这个模块去解析我们的 source。
这里解析完的结果就是一段 HTML 字符串，如果我们直接返回的话同样会面临 Webpack 无法解析模块的问题，正确的做法是把这段 HTML 字符串拼接为一段 JS 代码。
先通过 JSON.stringify() 将字段字符串转换为标准的 JSON 字符串，然后再参与拼接，这样就不会有问题了。
至此实现了markdown转换的需求，完成了自定义Loader模块
网友评论