title: webpack 打包 HTML img
date: 2017-11-30 22:25:17
tags:
keywords:
- webpack
- html img src
使用 webpack 進(jìn)行前端開發(fā)時, 遇到在 html-webpack-plugin template html 中 img 標(biāo)簽 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 這個插件來提取樣式表到單獨(dú)文件, 這樣帶來兩個新的問題:
引入 html-loader 問題一
css 文件放在單獨(dú)一個文件夾下面, 對圖片資源的引用使用相對路徑, 需要回退目錄, 而 html 文件自身放置在外層, 對圖片資源的引用使用相對路徑時, 不需要回退目錄. 這樣 url-loader 在處理圖片資源的時候就要求區(qū)分對待, 即:
當(dāng)在 css, less 中引用圖片路徑時, 相對路徑使用回退
../當(dāng)在 html 中引用圖片路徑時, 相對路徑不使用回退
解決這個問題,關(guān)鍵的配置項(xiàng)是 publicPath, 這個 publicPath 既可以出現(xiàn)在 url-loader > options 下面, 也可以出現(xiàn)在 ExtractTextPlugin.extract 下面, ExtractTextPlugin.extract > publicPath 能夠覆蓋 url-loader > options > publicPath, 也就是說只在 ExtractTextPlugin.extract > publicPath 中指定回退目錄即可, 不必配置到 url-loader > options 下面, 避免污染全局 publicPath.
引入 html-loader 問題二
html-loader 和 HtmlWebpackPlugin 放到一起時會導(dǎo)致在 webpack.config.js > HtmlWebpackPlugin 中配置的 title 不能成功替換 template html 中的 <%= htmlWebpackPlugin.options.title %>. 這個問題暫時沒找到好的解決方法, 只能放棄在 webpack.confg.js > HtmlWebpackPlugin 中配置 title, 挺討厭的.
作為外部資源引入
還有一種做法, 在 html 中對圖片資源的引用, 以外部資源的方式處理. 這樣就不經(jīng)過 webpack loader rules, 利用 CopyWebpackPlugin 這個插件將開發(fā)目錄下面的外部資源拷貝到發(fā)布目錄, template html 中 img src 保持傳統(tǒng)的寫法即可.
總結(jié)
以上兩種處理方式, 我更傾向于第二種, 對于 html 中的 img src 以外部資源的方式引入. 簡單直接, 不需要引入 html-loader 插件, 就不會帶來上面提到的副作用. 最終我們將圖片資源分為兩類:
-
需要在 css 中引用的圖片
這類圖片放到開發(fā)目錄下的 assets 文件夾, 會經(jīng)過
url-loader -
需要在 html 中引用的圖片
這類圖片放到開發(fā)目錄下的
externals文件夾, 該文件夾下面的資源文件最終將會被CopyWebpackPlugin拷貝到 dist 目錄
最后, 貼一張項(xiàng)目的目錄結(jié)構(gòu), 以便有個直觀的了解
獲取更多信息
安防流媒體互聯(lián)直播-QQ交流群：615081503
LiveGBS-QQ交流群：947137753
WEB：www.liveqing.com
電話：187-0985-4855 (同微信)
Copyright ? LiveQing.com 2016-2019
