背景
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压缩。