loader的使用方法

    1. module.exports = {
    2.  //...
    3.   module: {
    4.     rules: [
    5.         { test: /\.txt$/, loader: "mytxt-loader" }
    6.       ]
    7.   },
    8.   //...
    9. };

    翻译过来就是：匹配后缀时txt的模块使用mytxt-loader转换

    如何转换？
    loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用，输入资源，转换，然后输出。举一个最简单的例子，将输入的资源原样输出

    1. module.exports = function(source) {
    2.     // source是源文件内容
    3.   return `module.exports = '${source}'`;
    4. }

    以上时最简单的一个模板，具体的loader就是对输入的source进行特殊处理然后输出。

    loader在链式调用时，会以相反的顺序执行

    • 最后的 loader 最早调用，将会传入原始资源内容。
    • 第一个 loader 最后调用，期望值是传出 JavaScript 和 source map（可选）。
    • 中间的 loader 执行时，会传入前一个 loader 传出的结果。
      1. module: {
      2.       rules: [
      3.           {
      4.               test: /\.css$/,
      5.               use: [
      6.                   {
      7.                       loader: 'style-loader' // 后执行er前面
      8.                   },
      9.                   {
      10.                       loader: 'css-loader' // 先执行
      11.                   }
      12.               ]
      13.              //use:['style-loader','css-loader'] // 此处也可以这样写
      14.           }
      15.       ]
      16.   }