在实际应用中有以下几种图片的引用方式:
- HTML文件中img标签的src属性引用或者内嵌样式引用
<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>
- CSS文件中的背景图等设置
.photo {
background: url(photo.jpg);
}
- JavaScript文件中动态添加或者改变的图片引用
var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;
在webpack里面打包图片资源需要用到url-loader
- 首先安装url-loader
npm install --save-dev url-loader
- webpack.config.js配置
//处理图片资源
{ test: /\.(gif|png|jpg)$/,
loader: 'url-loader',
options: {
//图片小于100b,就会被base64处理
//优点:减少请求数量(减轻服务器压力)
//缺点:图片体积会更大(文件请求速度更慢)
limit: 100,
//问题:因为url-loader默认使用es6模块化解析,html-loader引入图片是commonjs
//解析时会出现问题:[object Module]
//关闭url-loader的es6模块化解析,使用commonjs
esModule: false,
name: '[hash:10].[ext]',
//把打包的图片资源输出到image下
outputPath: 'resource'
}
},
//处理html的img图片(负责引入img,从而能被url-loader进行处理)
{ test: /\.html$/,
loader: 'html-loader'
}
这样配置后打包的时候报了一个错误:
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve '../../dist/js/index.js' in 'F:\FrontEn d\Project\aiunmall-fe\src\view'
ModuleNotFoundError: Module not found: Error: Can't resolve '../../dist/js/ind ex.js' in 'F:\FrontEnd\Project\aiunmall-fe\src\view'
- Compilation.js:1668 factory.create
[node_global]/[webpack]/lib/Compilation.js:1668:28
- NormalModuleFactory.js:712 hooks.factorize.callAsync
[node_global]/[webpack]/lib/NormalModuleFactory.js:712:13
- NormalModuleFactory.js:273 hooks.resolve.callAsync
[node_global]/[webpack]/lib/NormalModuleFactory.js:273:22
- NormalModuleFactory.js:402 err
[node_global]/[webpack]/lib/NormalModuleFactory.js:402:22
- NormalModuleFactory.js:117 err
[node_global]/[webpack]/lib/NormalModuleFactory.js:117:11
- NormalModuleFactory.js:628 resolveResource
[node_global]/[webpack]/lib/NormalModuleFactory.js:628:24
- NormalModuleFactory.js:782 _resolveResourceErrorHints
[node_global]/[webpack]/lib/NormalModuleFactory.js:782:8
- NormalModuleFactory.js:902 asyncLib.parallel
[node_global]/[webpack]/lib/NormalModuleFactory.js:902:5
- child-compiler.js:169 childCompiler.runAsChild
[aiunmall-fe]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:534 compile
[node_global]/[webpack]/lib/Compiler.js:534:11
- Compiler.js:1087 hooks.afterCompile.callAsync.err
[node_global]/[webpack]/lib/Compiler.js:1087:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[node_global]/[webpack]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1083 compilation.seal.err
[node_global]/[webpack]/lib/Compiler.js:1083:33
- Compilation.js:2424 hooks.afterSeal.callAsync.err
[node_global]/[webpack]/lib/Compilation.js:2424:11
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[node_global]/[webpack]/[tapable]/lib/Hook.js:18:14
- Compilation.js:2417 hooks.processAssets.callAsync.err
[node_global]/[webpack]/lib/Compilation.js:2417:38
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.31.0 compiled with 3 errors in 744 ms
导致打包后的html里面引入的图片无法加载出来,刚开始找,网上说是我静态资源路径有问题,可是后面检查了好几遍也没发现问题,最后才知道webpack处理html文件里面的图片资源时需要用到html-withimg-loder
webpack.config.js 添加配置
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
}
重新打包后发现图片可以正常加载出来了。