webpack之resolveLoader

80 阅读1分钟

webpack中resolveLoader的使用方法

1. 第一是通过npm包安装的loader可以这样写

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

直接写loader名称可以找到对应的loader

2 如果是自己写loader,可以使用绝对路径的方式

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

我的loader在当前目录的loaders文件夹中的a.js文件

3 通过配置别名的方式了

resolveLoader: {
    alias: {
      'a-loader': path.resolve(__dirname, 'loaders/a.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'a-loader',
        exclude: /node_modules/
      }
    ]
  }

4 通过loader的查找方式来定义,loader默认会在node_modules查找,也可以指定其他的目录,来查找我们自定义的loader

resolveLoader: {
    modules: [path.resolve(__dirname, 'node_modules'),path.resolve(__dirname, 'loader')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'a',
        exclude: /node_modules/
      }
    ]
  },