在webpack中使用 html-withimg-loader 打包html文件中的圖片

在安裝並配置file-loader插件后，在js文件中引入圖片使用import導入圖片才能被打包，在css或者sass中的背景圖片，需要@import css或sass到js文件中才能被打包

對於html中的img的src引入的圖片無法正常打包，這時候需要引入一個webpack的插件 html-withimg-loader

插件地址https://www.npmjs.com/package/html-withimg-loader

安裝 npm install html-withimg-loader -S

使用 webpack.config.js
const HtmlWithimgLoader = require("html-withimg-loader ")；　　
module: {
　　rules: [
　　　　{
　　　　　　test: /\.(htm|html)$/,
　　　　　　loader: 'html-withimg-loader'
　　　　},
　　　　// 在file-loader 的options中必須配置esModule: false
　　　　{
　　　　　　test: /\.(png|jpg|gif)$/,
　　　　　　use: [
　　　　　　　　{
　　　　　　　　　　loader: 'file-loader',
　　　　　　　　　　options: {
　　　　　　　　　　　　name: '[name].[ext]',
　　　　　　　　　　　　outputPath: 'img/',
　　　　　　　　　　　　publichPath: 'img/',
　　　　　　　　　　　　esModule: false 
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　]
}