前端构建工具Webpack之加载器（loader）

超、凢脫俗 2022-04-06 15:40 353阅读 0赞

## 背景 ##

Webpack将js、css之类的文件统一视为一个模块，而如css这样的模块，它是不可以直接加载的。

那么就需要专用的loader了，如：`less-loader`。使用起来是相当的方便，只需要在webpack的构建脚本中指定一个特殊的`rules`即可，上代码：

## 安装 ##

这里同样使用npm方式安装，当然你可以用`yarn`或者其他的工具。

npm install less-loader --save-dev

## 配置 ##

编写`webpack.config.js`文件：

rules: [
      { 
        test: /\.less$/,
        use: ['style-loader', { 
          loader: 'less-loader',
          options: { 
            minimize: true
          },
        }],
      }
    ]

或者简写为：

rules: [
      { 
        test: /\.less$/,
        use: ['style-loader', 'less-loader?minimize'],
      }
    ]

再或者用更简单的方式：

require('style-loader!css-loader?minimize!./main.css')

这种方式需要在`main.js`源文件中指定，不过它只适用于较小的项目，而且只有少部分的文件。因为它也有不方便的地方，就是需要为每个单独的文件指定，项目规模一旦变大，这种写法就变成了恶梦。

## 问题 ##

**为什么有两个加载器呢？**

先用`css-loader`读取样式文件，再由`style-loader`将其导入到js中。

## 其他 ##

需要说明的是，这里的`test`是指定一个正则表达式，用以匹配对应的文件。而`use`则是针对该类型的文件使用特殊的loader（加载器）。

By the way，`use`内每个加载器都可以使用Url的QueryString参数形式设定对应的规则，如：`css-loader?minimize`，表示要开启css压缩。

发表评论取消回复

表情：

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

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

相关阅读

相关 Node.js webpack 加载器

问题:webpack 默认只能打包处理以 .js 后缀名结尾的模块,以下导入会报错 import './css/1.css' 打包处理css文件 1

柔光的暖阳◎/ 2023年01月04日 10:28/ 0 赞/ 164 阅读

相关 vue之vue-content-loader内容加载器使用

一、前言在打开一个页面时候，如果遇到界面内容多或者接口请求慢导致加载速度慢时，这时候会导致页面出现较长时间的空白页面，影响用户的体验感，vue-content-load

小灰灰/ 2022年12月10日 15:00/ 0 赞/ 183 阅读

相关 webpack/webpack+bundle-loader/webpack+redux code splitting（按需加载）

> 之前我写过一篇关于redux相关的code splitting > 之前的文章->[http://blog.csdn.net/fay462298322/article/

「爱情、让人受尽委屈。」/ 2022年06月05日 04:26/ 0 赞/ 199 阅读

相关用于 webpack 的 Knockout 组件加载器 koc-loader

koc-loader 详细介绍 koc-loader 是一个 webpack loader，可以使用类似 Vue 单文件组件的风格来编写和使用 Knockout 组件。代

悠悠/ 2022年05月17日 01:59/ 0 赞/ 171 阅读

相关前端构建工具------Webpack vs Gulp

理想的前端开发流程在说构建工具之前得先说说咱期望的前端开发流程是怎样的？写业务逻辑代码（例如 es6，scss，pug 等）处理成浏览器认识的（js，

逃离我推掉我的手/ 2022年04月18日 02:50/ 0 赞/ 358 阅读

相关前端构建工具Webpack之加载器（loader）

背景 Webpack将js、css之类的文件统一视为一个模块，而如css这样的模块，它是不可以直接加载的。那么就需要专用的loader了，如：`less-loader

超、凢脫俗/ 2022年04月06日 15:40/ 0 赞/ 354 阅读

相关前端自动化构建工具之webpack入门——简单入门

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 写在前面这篇博客也是参照别人的webpa

分手后的思念是犯贱/ 2022年01月13日 13:49/ 0 赞/ 331 阅读

相关 Webpack模块加载器

![328599-20170418094918681-1031600624.jpg][] 一、介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载

今天药忘吃喽~/ 2021年10月25日 14:40/ 0 赞/ 406 阅读

相关 webpack之Loader加载器

webpack 的目标是，让 webpack 聚焦于项目中的所有资源(asset)，而浏览器不需要关注考虑这些（明确的说，这并不意味着所有资源(asset)都

浅浅的花香味﹌/ 2021年09月14日 05:00/ 0 赞/ 381 阅读

相关 webpack构建与loaders

[http://www.cnblogs.com/yangjunhua/p/5680168.html][http_www.cnblogs.com_yangjunhua_p_56

刺骨的言语ヽ痛彻心扉/ 2021年09月14日 02:08/ 0 赞/ 391 阅读