title: webpack 打包 HTML img
date: 2017-11-30 22:25:17
tags:
keywords:
- webpack
- html img src
使用 webpack 进行前端开发时, 遇到在 html-webpack-plugin template html 中 img 标签 src 无法正常解析, 但是写在 css, less 中的 url
可以正常解析, 比如:
background: url(~assets/images/logo.png); /** css 中可以解析 **/
<img src="~assets/images/logo.png"> <!-- html 中不可以解析 -->
使用 html-loader 解决
首先安装 html-loader 插件
npm i html-loader
然后, 在 webpack.config.js > module > rules 下面添加一个 loader rule
{
test: /\.html$/,
loader: 'html-loader'
}
通过这样的配置, template html 中所有的 img src 都等同于 css, less 中的写法, 由于我在 webpack 中还使用了 extract-text-webpack-plugin 这个插件来提取样式表到单独文件, 这样带来两个新的问题:
引入 html-loader 问题一
css 文件放在单独一个文件夹下面, 对图片资源的引用使用相对路径, 需要回退目录, 而 html 文件自身放置在外层, 对图片资源的引用使用相对路径时, 不需要回退目录. 这样 url-loader 在处理图片资源的时候就要求区分对待, 即:
当在 css, less 中引用图片路径时, 相对路径使用回退
../当在 html 中引用图片路径时, 相对路径不使用回退
解决这个问题,关键的配置项是 publicPath, 这个 publicPath 既可以出现在 url-loader > options 下面, 也可以出现在 ExtractTextPlugin.extract 下面, ExtractTextPlugin.extract > publicPath 能够覆盖 url-loader > options > publicPath, 也就是说只在 ExtractTextPlugin.extract > publicPath 中指定回退目录即可, 不必配置到 url-loader > options 下面, 避免污染全局 publicPath.
引入 html-loader 问题二
html-loader 和 HtmlWebpackPlugin 放到一起时会导致在 webpack.config.js > HtmlWebpackPlugin 中配置的 title 不能成功替换 template html 中的 <%= htmlWebpackPlugin.options.title %>. 这个问题暂时没找到好的解决方法, 只能放弃在 webpack.confg.js > HtmlWebpackPlugin 中配置 title, 挺讨厌的.
作为外部资源引入
还有一种做法, 在 html 中对图片资源的引用, 以外部资源的方式处理. 这样就不经过 webpack loader rules, 利用 CopyWebpackPlugin 这个插件将开发目录下面的外部资源拷贝到发布目录, template html 中 img src 保持传统的写法即可.
总结
以上两种处理方式, 我更倾向于第二种, 对于 html 中的 img src 以外部资源的方式引入. 简单直接, 不需要引入 html-loader 插件, 就不会带来上面提到的副作用. 最终我们将图片资源分为两类:
-
需要在 css 中引用的图片
这类图片放到开发目录下的 assets 文件夹, 会经过
url-loader -
需要在 html 中引用的图片
这类图片放到开发目录下的
externals文件夹, 该文件夹下面的资源文件最终将会被CopyWebpackPlugin拷贝到 dist 目录
最后, 贴一张项目的目录结构, 以便有个直观的了解
获取更多信息
安防流媒体互联直播-QQ交流群：615081503
LiveGBS-QQ交流群：947137753
WEB：www.liveqing.com
电话：187-0985-4855 (同微信)
Copyright © LiveQing.com 2016-2019
