webpack编写自定义Loader

module.exports = {
  module:{
    rules:[
      {
        test: /\.less$/,
        loader:‘css-loader!less-loader‘, // 1.多个loader中用感叹号分隔（无参数传递时）
      },
      {
        test:/\.css/,
        use:[‘css-loader‘],//2.数组形式（无参数传递时）
      },
      {
        test:/\.(png|gif|jpg)$/,
        use:[ // loader传递参数时建议该方法
          {
            loader: ‘file-loader‘,
            options:{ // file-loader自己的参数，跟webpack无关
              name: ‘images/[name].[hash:8].js‘
            }
          }
        ]
      }
    ]
  }
};

// Webpack中loader是一个CommonJs风格的函数，接收输入的源码，通过同步或异步的方式替换源码后进行输出。
// module.exports = function (source, sourceMap, meta) {
// }
// ?source是输入的内容
// ?sourceMap是可选的
// ?meta是模块的元数据，也是可选的
// 需要注意的是，该导出函数必须使用function，不能使用箭头函数，因为loader编写过程中会经常使用到this访问选项和其他方法。

// 通过loader - utils来读取配置选项
const loaderUtils = require(‘loader-utils‘);

// module.exports = function (source) {
//   const options = loaderUtils.getOptions(this);
//   return source.replace(/World/g, options.text);
// };

// loader异步，通过this.async(),此例子，打包的时候等待1秒
module.exports = function (source) {
  const callback = this.async();
  const options = loaderUtils.getOptions(this);
  setTimeout(() => {
    const output = source.replace(/World/g, options.text);
    callback(null, output);
  }, 1000);
}

const path = require(‘path‘);
module.exports = {
    entry: ‘./src/index‘,
    mode: ‘production‘,
    target: ‘node‘, // 我们编译为Node.js环境下的JS，等下直接使用Node.js执行编译完成的文件
    output: {
        path: path.resolve(__dirname, ‘build‘),
        filename: ‘[name].js‘
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: ‘replace-loader‘,
                        options: {// 给loader传的参数
                            text: ‘Webpack4--loader异步‘
                        }
                    },
                    {
                        loader: ‘i18n-loader‘,
                        options: { // 传递选项
                            locale: ‘zh‘
                        }
                    }
                ]
            }
        ]
    },
    resolveLoader: {
        modules: [‘./node_modules‘, ‘./loader‘] // 配置loader的查找目录
    }
};