webpack中resolveLoader的使用方法

Posted wuxianqiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/
      
    ]
  ,

 

以上是关于webpack中resolveLoader的使用方法的主要内容,如果未能解决你的问题,请参考以下文章

webpack-loader原理

Webpack 中的第 3 方 Javascript 和 CSS 文件。奇怪的行为

无法解析“babel-loader”

Rails webpack 错误:第 3 方 gem 无法解析 jQuery

使用带有 vuejs 的 jquery 插件,没有 webpack?

webpack讲解