Web前端 - webpack 打包图片

建立daichen.css文件

div{
color:red;
height: 800px;
background: url(./../m.jpg);
}

在html文件中正常引用link 背景正常显示。

此时使用webpack打包，出现错误！

安装插件：

npm install url-loader

设置配置：

{

test: /\.(png)|(jpg)$/,

loader: "url?limit=50000"

}

module.exports = {
entry:[
'./es2015/index.js'//代表入口(总)文件 ，可以写多个。
],
output: {
path: './es2015/',  //输出文件夹
filename:'index-webpack.js'   //最终打包生成的文件名
},

//引用外部加载器
module: {
loaders: [
{
test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用 下面的loader
loader: 'babel',
query:{
presets:['es2015']
}
},

{
test: /\.css$/,
loaders: ['style', 'css'],
},
{

test: /\.(png)|(jpg)$/,

loader: "url?limit=50000"

}

]
}
}

limit参数，代表如果 小于大约50K 则会自动帮你压缩成base64编码的图片

命令：webpack 正常！