【webpack】中resolveLoader的使用方法

爱被打了一巴掌 2021-10-26 13:31 375阅读 0赞

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

转载于:https://www.cnblogs.com/wuxianqiang/p/11332544.html

发表评论取消回复

表情：

评论列表（有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack基础介绍和使用方法

1.webpack是什么？ \-`webpack 是代码编译工具，有入口、出口、loader 和插件。` webpack 是一个用于现代 JavaScript 应

深藏阁楼爱情的钟/ 2023年10月14日 12:42/ 0 赞/ 13 阅读

相关 webpack中img标签的src使用相对路径的方法

简介 > Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码

迈不过友情╰/ 2023年01月05日 05:12/ 0 赞/ 421 阅读

相关 webpack4中sass的使用

1:安装 npm install sass-loader node-sass --save-dev 2:配置中加入 sass 重新编译就可以 {

r囧r小猫/ 2022年12月23日 14:25/ 0 赞/ 249 阅读

相关 webpack中的url-loader的使用

默认情况下 webpack 无法处理 css 文件中的 url() 地址，不管是图片还是字体库下载： cnpm i url-loader file-loader

た入场券/ 2022年12月20日 08:46/ 0 赞/ 166 阅读

相关 webpack-dev-server使用方法

webpack-dev-server使用方法首先来回顾以下webpack的内容首先，我们来看看基本的webpack.config.js的写法 const

淡淡的烟草味﹌/ 2022年10月27日 02:56/ 0 赞/ 167 阅读

相关 webpack中webpack.config.js的使用

文章目录 webpack.config.js的作用：示例源码运行结果分析 webpack.config.j

朴灿烈づ我的快乐病毒、/ 2022年04月18日 05:43/ 0 赞/ 626 阅读

相关 vue中Webpack的使用

在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C\ 语言） CSS .css

水深无声/ 2022年01月11日 11:19/ 0 赞/ 343 阅读

相关 Webpack的使用

一、了解Webpack 　　1、什么是webpack 　　　　Webpack是一个模块打包器(bundler) 　　　　在Webpack看来，前端的所有资源文件

亦凉/ 2021年12月03日 11:27/ 0 赞/ 385 阅读

相关 webpack-dev-server使用方法

webpack-dev-server使用方法首先来回顾以下webpack的内容首先，我们来看看基本的webpack.config.js的写法 const

ゝ一纸荒年。/ 2021年11月05日 17:56/ 0 赞/ 480 阅读

相关【webpack】中resolveLoader的使用方法

loader引入的几种方式第一是通过npm包安装的loader可以这样写 module: { rules: [ {

爱被打了一巴掌/ 2021年10月26日 13:31/ 0 赞/ 376 阅读