主要通过less-loader、css-loader、style-loader插件作用
less-loader:用于加载.less文件,将less转化为css
css-loader:用于加载.css文件,将css转化为commonjs
style-loader: 将样式通过<style>标签插入到head中
先安装这几款插件
npm i style-loader css-loader less less-loader -D
在webpack.config.js文件中加入如下配置
'use strict'
const path = require('path')
module.exports = {
mode: 'production',
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
解析less主要是通过以上代码中的以下部分
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
这里有一点要注意,他们的解析过程是链式的,所以在use数组中下面的部分会先执行,所以他们的执行顺序其实是less-loader > css-loader > style-loader