webpack中resolveLoader的使用方法

第一种:通过npm包安装的loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },

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

第二种:自己写loader,可以使用绝对路径的方式
  module: {
    rules: [
      {
        test: /\.js$/,
        use: path.resolve(__dirname, 'loaders/babel-loader.js'),
        exclude: /node_modules/
      }
    ]
  },

自己的loader放在当前目录的loaders文件夹中的babel-loader.js文件

第三种:自己写loader,使用绝对路径,配置别名
  resolveLoader: {
    alias: {
      'babel-loader': path.resolve(__dirname, 'loaders/babel-loader.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
第四种:通过loader的查找方式来定义,loader默认会在node_modules查找,也可以指定其他的目录,来查找我们自定义的loader
  resolveLoader: {
    modules: [
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'loaders')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'myLoaderName',
        exclude: /node_modules/
      }
    ]
  },
第五种:node_modules替换为自己的loader文件夹
resolveLoader: {
    modules: ["./node_modules", "./loaders"],
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容