webpack中resolveLoader的使用方法

Posted 2022-06-28 wuxianqiang

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/
      
    ]
  ,