本节知识点
- 重点讲解 : html-withimg-loader
(1) 没有全局安装webpack，那应该怎么办
- 在处理之前要说明一点就是要是只是本地安装webpack没有全局安装。那该怎么办
找到package.json文件的script选项。在下面加入
"scripts":{
"server" : "webpack-dev-server --open",
"build" : "webpack"
}
配置完成后可以在控制台输入npm run build即可
(2) 如何把图片放到指定的文件夹下面
只需要配置我们的url-loader选项就可以了,这样输出的结果就是存到images文件夹下面
{
test:/\.(jpg|png|gif)/,
use:[
{
loader:"url-loader",
options:{
limit:5000,
outputPath:"images/"
}
}
]
}
(3) html-withimg-loader
他解决的问题就是html 文件中引入<img>标签问题
安装
npm install html-withimg-loader --save
因为页面会用到所以不用--save-dev
配置loader
{
test:/\.(html|htm)$/i,
use:['html-withimg-loader']
}
然后在从新打包，这样你就会发现。HTML文件中的图片也被打包了.
