7 HTML中img标签的图片资源处理

HTML中img标签的图片资源处理

url-loader处理了css中背景图片的引用的问题；html中直接使用img标签src加载图片的话，使用copy-webpack-plugin插件是将图片复制到dist目录下，因为没有被依赖，图片将不会被打包，html-withimg-loader是另一种解决这个问题的方式，图片会被打包，而且路径也会处理妥当。

1. 安装

npm install -S html-withimg-loader

2. 在webpack.config.js文件中添加loader

{
    test: /\.(htm|html)$/i,
    loader: 'html-withimg-loader'
}

使用时，只需要在html中正常引用图片即可，webpack会找到对应的资源进行打包，并修改html中的引用路径

html-withimg-loader用来处理html中的img资源，并且其打包规则与url-loader一样；copy-webpack-plugin是从源拷贝到目标位置，如dist目录，变相实现img图片的引用，但并不是经过webpack的打包，更适用于音视频等媒体资源。