webpack打包图片资源问题

在实际应用中有以下几种图片的引用方式：

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模块化解析，使用commonjsesModule: 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:381 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'}]
}

重新打包后发现图片可以正常加载出来了。

webpack打包图片资源问题相关推荐

webpack5打包普通html项目,webpack打包其他资源
webpack打包其他资源文件图片打包 file-loader的使用 css内引入图片资源安装 npm install file-loader -D outputPath:图片文件打包的放在哪个文 ...
npm 及 webpack打包工具
npm包管理工具 1,认识npm npm即node的包管理器是Node.js默人的.以JavaScript编写的软件包管理系统 npm已经是前端工程师的标配在npm上我们可以很方便的下载我们所需要 ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
mars3d - Webpack打包教程
mars3d - Webpack打包教程 1.新建文件夹mars3d-webpack 2.初始化 npm,然后在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 ...
Webpack打包-打包详细流程
Webpack Webpack是一个现代化的静态模块打包器,支持JavaScript.CSS.图片等资源的打包.它将所有模块及其依赖项视为静态资源,并创建一个依赖关系图,将这些资源转换为有效的输出文 ...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件在scr目录下创建image文件夹,并且添加几张图片在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...
使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25
一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...

webpack打包图片资源问题

webpack打包图片资源问题相关推荐

最新文章

热门文章