【webpack】中resolveLoader的使用方法

loader引入的幾種方式

 

第一是通過npm包安裝的loader可以這樣寫

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

直接寫loader名稱可以找到對應的loader 

 

如果是自己寫loader，可以使用絕對路徑的方式

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

我的loader在當前目錄的loaders文件夾中的a.js文件

 

如果上面方式你還不滿意，那么就可以通過配置別名的方式了

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

 

如果還是不滿意，那么就是通過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/
      }
    ]
  },