自学内容网 自学内容网

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)!