loader是webpack中模块解析器,例如常见的css-loader:

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 
          'css-loader'
        ]
      }
}

识别loader

有些时候我们想自定义loader,但是webpack默认是在node_modules目录下寻找loader,webpack将无法识别,因此我们要先配置webpack如何识别到我们写的loader:

1.resolveLoader.moduels

resolveLoader: {
    modules: ['node_modules', 'loaders'] // 先从node_modules中查找,没有从loaders文件夹中查找loader1.js  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['loader1']
      }
    ]
  }

2.resolveLoader.alias

resolveLoader: {
    alias: {// 绝对路径
      loader1: path.resolve(__dirname, 'loaders', 'loader1.js')
    }
  },

3.loader的绝对路径

module: {
    rules: [
      {
        test: /\.js/,
        use: [path.resolve(__dirname, 'loaders', 'loader1.js')]
      }
    ]
  }

4.npm link

之前写过一篇npm link 的文章:npm link

自定义简单loader

今天我们实现个简单的loader,将js中的A变成B,我们先新建一个test-loader目录,新建index.js:

function replace(source) {
    return source.replace(/A/g, 'B');
}
module.exports = function (content) {
    return replace(content);
};

接着创建package.json:(利用npm link方式)

{
  "name": "test-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js"
}

然后将test-loader和真正开发的目录关联起来,最后将test-loader配入webpack.config.js中:

module: {
		rules: [
			{
				test: /\.js$/,
				use: ['test-loader']
			}
		]
	},

运行项目,就可以将项目中的A变成B。

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字