webpack为什么要使用loader，如何手写loader

webpack是一个打包工具，即webpack会将一切文件视为模块，但是webpack在打包的时候只是认识JS文件或者JSON文件，并不认识CSS文件，png图片等，如果想让webpack能够在打包的时候识别其他文件，就必须要使用loader，即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。

loader在webpack中的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

其中的rules是一个对象数组，因为在webpack中，不会仅仅是使用一个loader，也会同时使用多个loader帮助webpack来解析除JS外的其他文件，且rules的执行顺序是从下往上执行，即如果我们要优先执行的loader，我们就需要写在rules的最下面。且每个rules都有两个配置项，一个test即是我们这个loader是处理什么对象的，即测试对象。下面的use就是我们使用的loader。

对于Loader我们可以通过rules去匹配，哪些文件会被这个loader所处理。Loader本身就是一个函数，当webpack解析资源的时候，会调用相关的loader去处理，loader接收到文本内容作为参数，将处理完的内容进行返回出去。那么loader除了接收内容作为参数外，还有map代表sourcemap，以及meta代表别的loader传递的参数。

以css-loader为例：

我们需要使用 css-loader 来处理css文件，webpack编译后就不再是CSS文件了，而只是一段JS代码，而使用 style-loader 的作用就是，将css-loader所转化的JS对象进行执行，核心就是会动态的创建一个style标签，将前者所转化的JS对象动态的插入到header中。这样就将CSS文件成功的让webpack识别。

如何写webpack loader

写一个Markdown文件的loader，使md文件可以被import并使用

（识别md文件能够读取md文件信息）

新建一个loader.js文件，里面通过引用插件之类的方法实现我们需要的功能，比如读取markdown文件，利用  marked 插件将md文件转换为html字符串return出去，在webpack.config.js的Module中正则匹配ms后缀文件，使用我们在config中配置的md loader，这样在app.js中引用这个md文件就可以打印出内容的html串了。

// markdown-loader.js
const marked = require('marked') // marked是在package中安装的一个包

function transform(source) {
  const html = marked.parse(source)
  return `export default ${JSON.stringify(html)}`;
}

// webpack中的配置
{
  test: /.md$/,
  use: "./config/markdown-loader.js',
  // use写入loader的相对路径
  // use不仅可以写入名称，也可以写入路径，和node的require模式是 一样的
}

原文地址：https://blog.csdn.net/weixin_54714100/article/details/136995307

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！