Webpack 不会捆绑仅在 HTML 中引用的图像

Question

我遇到了一个无法自己解决的扼杀问题。当它们仅在 HTML 中引用时，我的 webpack 配置不会将源目录中的图像编译为构建目录，而它确实编译了 css 中引用的图像而没有任何问题。这是我的webpack.config.file：

var webpack = require('webpack');
var path = require('path');

module.exports = {
entry: {
bundle: './js/app.js',
vendor: 'jquery'
},
output: {
path: path.resolve('./build'),
filename: "[name].js",
publicPath: './build/'
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity })],
watch: true,
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /.(png|jpg|gif|svg)$/,
loaders: [{
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
context: '',
}
},
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 5,
},
pngquant: {
quality: '75-90',
speed: 5,
},
}
}
]
},
{
test: /.(eot|ttf|woff|woff2)$/,
loader: 'url-loader'
},

{
test: /.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':img-src']
}
}
}
]
}
};

Answer 1

html-loader将仅以<tag>:<attribute>的形式处理在attrs选项中指定的属性。您正在使用:img-src，这意味着匹配任何标签(因为:前面的值为空(并处理属性img-src。

你想要的是处理img标签的src属性：

{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}

这已经是html-loader的默认值(请参阅自述文件 - 用法(，这意味着您无需配置该选项。