webpack打包样式资源分两步走:
一: 安装 style-loader css-loader less-loader
npm i style-loader css-loader less-loader -D
二: 在webconfig中做如下配置:
const { resolve } = require('path');
module.exports = {
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
}
]
},
// 模式
mode: 'development', // 开发模式
}
注意:
- 1 use数组中loader执行顺序:从右到左,从下到上 依次执行
- 2 style-loader:创建style标签,将js中的样式资源插入进行,添加到head中生效
- 3 css-loader:将css文件变成commonjs模块加载js中,里面内容是样式字符串
- 4 less-loader:将less文件编译成css文件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。