html 图片分散,(十) 处理HTML中的图片

本节知识点

重点讲解 : 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 文件中引入标签问题

安装

npm install html-withimg-loader --save

因为页面会用到所以不用--save-dev

配置loader

{

test:/\.(html|htm)$/i,

use:['html-withimg-loader']

}

然后在从新打包，这样你就会发现。HTML文件中的图片也被打包了.