webpack 打包 HTML img

转载地址：https://www.jianshu.com/p/087a873d7784

 

使用 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 插件, 就不会带来上面提到的副作用. 最终我们将图片资源分为两类:

1. 需要在 css 中引用的图片

   这类图片放到开发目录下的 assets 文件夹, 会经过 url-loader

2. 需要在 html 中引用的图片

   这类图片放到开发目录下的 externals 文件夹, 该文件夹下面的资源文件最终将会被 CopyWebpackPlugin 拷贝到 dist 目录

最后, 贴一张项目的目录结构, 以便有个直观的了解

目录结构

作者：penggy
链接：https://www.jianshu.com/p/087a873d7784