在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 
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　]
}