如果我们想将图片文件打包到指定路径下,我们需要在前面准备加载器插件:
npm install url-loader --save-dev
npm install file-loader --save-dev
在rules中添加
{
test: /\.(png|jpg|jpeg|gif)$/,
use:[
{
loader: "url-loader",
options: {
name:'[name][hash:5].[ext]',
limit:8*1024,
outputPath:'image'
}
}
]
},
这个时候你发现你的图片已经编译成了base64格式了,但是你HTML中的图片路径地址没有遍,这个时候我想你大概想到的是html-loader或者是img-loader吧。其实你这是没有错的,但是在新版本的webpack中不行了,因为它和HTMLWebpackPlugin冲突,所以我们这个时候就需要做选择了,我选择的是使用HTMLWebpackPlugin。这个时候我们需要做以下几个操作
- 将html文件改成ejs文件
-
<img src="<%= require('../images/1.png')%>" alt="">
- template: "./public/index.ejs"
最终我们大功告成!