webpack学习4 -背景图片的编译,打包

上3篇,我们已经可以打包less ,css 和js ,现在我们有这个需求,就是打包图片

webpack学习4 -背景图片的编译,打包

 

webpack学习4 -背景图片的编译,打包

 

我们的目标就是 看到div 的背景是这张图片,也就是让webpack 可以打包图片!

webpack学习4 -背景图片的编译,打包

 

直接webpack ,他会报上面的错误,所以我们还是要Loader

 1,我们先装下loader

webpack学习4 -背景图片的编译,打包

 

2,然后我们再修改webpack.config.js 配置文件信息!

webpack学习4 -背景图片的编译,打包

 

3, 我们用命令行webpack 一下没有任何问题,

4,测试要显示出来了!

webpack学习4 -背景图片的编译,打包

 

恩,到此我们就能打包图片,是不是很惊喜,是不是很意外!