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

Question

我遇到了一个我自己无法解决的扼杀问题。当仅在 HTML 中引用它们时，我的 webpack 配置不会将源目录中的 imagenes 编译到 build 目录，而它确实编译在 css 中引用的 imagenes 没有任何问题。这是我的 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只会处理attrs选项中以 . 形式指定的属性<tag>:<attribute>。您正在使用:img-src，这意味着匹配任何标签（因为 之前的:值为空）并处理属性img-src。

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

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

这已经是html-loader（参见README - Usage）的默认设置，这意味着您不需要配置该选项。