如何编写一个webpack loader

0 点赞
0 条评论
631 次浏览
发布于 8 个月前

什么是loader

所谓 loader 只是一个导出为函数的 JavaScript 模块。这句话出自webpack的官方文档,那么现在我们可以知道其实loader就是一个函数,我们可以在这个函数里做一些事情。loader runner 会调用这个函数,然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。

// loaders/replace.js
module.exports = function (source) {
  return source.replace('oldName', this.query.name);
};

1、loader对外暴露的函数,切记不能使用箭头函数。因为在这个函数里,我们会用到this指向,webpack在调用loader的时候,会把this做一些变更。变更之后才能用this里的一些方法,如果写成箭头函数,这里的this指向就会有问题,所以这里的function一定是声明式的function
2、参数source为我们引入文件的源代码
3、在这里拿到代码之后,就可以把代码做一个变更,然后再返回出去
4、可以通过this.query取到传递的options内的一些参数

在webpack.config.js中做loader的使用配置

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js/,
      loader: path.join(__dirname, './loaders/replace.js'),
      options: {
        name: 'newName'// 传递给loader的参数
      }
    }]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

使用loader-utils分析参数:

// loader-utils模块需要单独使用npm下载安装
const loaderUtils = require('loader-utils');

module.exports = function (source) {
  // 使用loader-utils中的getOptions接收loader参数
  const options = loaderUtils.getOptions(this);
  return source.replace('oldName', options.name);
};

到这里,我们很轻松的就完成了一个自己的Loader。

版权所属:开发日记
转载时必须以链接形式注明原始出处及本声明。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...