Question

我遇到了一个我自己无法解决的扼杀问题。我的webpack配置不会从我的源目录编译imagene来构建目录，当它们仅从HTML中引用时，它会编译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），这意味着您不需要配置该选项。

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

1 个答案: