在安装并配置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
}
}
]
}
]
}
在webpack中使用 html-withimg-loader 打包html文件中的图片
原文:https://www.cnblogs.com/aidixie/p/12770690.html