美文网首页webpack那些事
webpack中resolveLoader的使用方法

webpack中resolveLoader的使用方法

作者: _静夜听雨_ | 来源:发表于2022-05-10 17:22 被阅读0次
第一种:通过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"],
  },

相关文章

  • webpack4.0 遇到的问题及部分使用方法

    一、安装及部分使用方法: 1、首先全局安装webpack和webpack服务:npm install -gwebp...

  • 【webpack】中enforce的使用方法

    loader的书写顺序很重要,因为loader的职责单一,组合使用的原则,所有loader一个一个处理的顺序很重要...

  • webpack打包第二节

    解决绑定时有不同的文件 npm html-webpack-plugin --save-dev使用方法:在webpa...

  • Vue2(一)

    目录 ◆ 前端工程化◆ webpack 的基本使用◆ webpack 中的插件◆ webpack 中的 loade...

  • webpack的bundle分析

    利用webpack官方提供的分析工具,可以分析应用bundle内所有module的体积和关系 使用方法: 生成.j...

  • bundle-loader

    一. 不依赖框架的使用方法 1. webpack.config.js 一定要在其他的js loader之前。 ...

  • react scss 使用方式

    目前有2种使用方式 方式1:根据文件路径编译样式 webpack 配置如下: 使用方法如下: 编译结果: src-...

  • webpack noParse参数

    webpack noParse webpack精准过滤不需要解析的文件 webpack配置中 module配置...

  • webpack babel 使用方法整理

    webpack babel-loader 基础配置 Babel ES6对JavaScript做了大量改造,加入了大...

  • Vue-cli 打包去掉console.log

    使用webpack中uglifyjs-webpack-plugin 插件 new UglifyJsPlugin({...

网友评论

    本文标题:webpack中resolveLoader的使用方法

    本文链接:https://www.haomeiwen.com/subject/sizdurtx.html