打包处理样式表中与url路径相关
的文件
- 运行
npm i url-loader file-loader -D
命令 - 在webpack.config.js的module->rules数组中,添加loader规则如下:
module: {
rules: [
//定义了不同模块对应的loader
{test: /\.css$/, use: ['style-loader', 'css-loader']},
//处理.less文件的loader
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
//文件后缀名的匹配模块
{test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}
]
}
其中?
之后的是loader的参数项
:
- limit用来指定
图片的大小
,单位是字节(byte) - 只有<=limit大小的图片,才会被转为base64格式的图片