webpack 从入门到放弃！( 四 ) _webpack中文文档

{test: /.png$/,use: 'url-loader'}
这样遇到png文件就会将其转换成url的形式。这种方式比较适合于项目中体积比较小的资源，如果体积过大就会造成打包结果也会很大，从而影响运行速度。
那么最佳实践是小文件使用Data URLs的方式减少请求次数，而大文件单独提取存放，提高加载速度。
{test: /.png$/,use:{loader: 'url-loader',options:{limit: 10*1024 //10KB}}}
这样只将10KB一下的文件转换为Data URLs，超过10KB的仍然会交给file- 。
自定义开发一个
作为的核心机制，内部的工作原理却非常简单。接下来我们一起来开发一个自己的，通过这个开发过程再来深入了解的工作原理。
这里我的需求是开发一个可以加载文件的加载器，以便可以在代码中直接导入 md 文件。我们都应该知道一般是需要转换为 html 之后再呈现到页面上的，所以我希望导入 md 文件后，直接得到转换后的 html 字符串，如下图所示：
在项目根目录下创建一个 -.js 文件
// ./markdown-loader.jsmodule.exports = source => {// 加载到的模块内容 => '# About\n\nthis is a markdown file.'console.log(source)// 返回值就是最终被打包的内容return 'hello loader ~'}
每个的都需要导出一个函数，这个函数就是我们这个对资源的处理过程，它的输入就是加载到的资源文件内容，输出就是我们加工后的结果。
完成以后，我们回到配置文件中添加一个加载器规则，这里匹配到的扩展名是 .md，使用的加载器就是我们刚刚编写的这个 -.js 模块，具体代码如下所示：
// ./webpack.config.jsmodule.exports = {entry: './src/main.js',output: {filename: 'bundle.js'},module: {rules: [{test: /\.md$/,// 直接使用相对路径use: './markdown-loader'}]}}
::: tip
这里的 use 中不仅可以使用模块名称，还可以使用模块文件路径，这点与 Node 中的函数是一样的。
:::
配置完成后，我们打开命令行终端运行打包命令，如下图所示：
打包过程中命令行确实打印出来了我们所导入的文件内容，这就意味着函数的参数确实是文件的内容。
但同时也报出了一个解析错误，说的是： You may need antotheof these .（我们可能还需要一个额外的加载器来处理当前加载器的结果）。
那这究竟是为什么呢？其实加载资源文件的过程类似于一个工作管道，你可以在这个过程中依次使用多个，但是最终这个管道结束过后的结果必须是一段标准的 JS 代码字符串。
所以我们这里才会出现上面提到的错误提示，那解决的办法也就很明显了：
我们将返回的字符串内容修改为 .log(‘hello ~’)，然后再次运行打包，此时就不再会报错了，代码如下所示：
// ./markdown-loader.jsmodule.exports = source => {// 加载到的模块内容 => '# About\n\nthis is a markdown file.'console.log(source)// 返回值就是最终被打包的内容// return 'hello loader ~'return 'console.log("hello loader ~")'}
我们打开输出的 .js，找到最后一个模块（因为这个 md 文件是后引入的），如下图所示：
这个模块里面非常简单，就是把我们刚刚返回的字符串直接拼接到了该模块中。这也解释了刚刚管道最后必须返回 JS 代码的原因，因为如果随便返回一个内容，放到这里语法就不通过了。
实现的逻辑
安装一个能够将解析为 HTML 的模块，叫作。安装完成后，我们在 -.js 中导入这个模块，然后使用这个模块去解析我们的。这里解析完的结果就是一段 HTML 字符串，如果我们直接返回的话同样会面临无法解析模块的问题，正确的做法是把这段 HTML 字符串拼接为一段 JS 代码。