Webpack不捆綁只在HTML中引用的圖像

Question

我遇到了一個我無法自己解決的扼殺問題。我的webpack配置不會編譯我的源代碼目錄中的imagenes，以便只在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將只處理那些在的<tag>:<attribute>形式attrs選項指定的屬性。您使用的是:img-src，表示匹配任何標籤（因爲:之前的值爲空）並處理屬性img-src。

你想要的是處理src屬性img標籤：

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

已經是html-loader默認（參見README - Usage），這意味着你不需要配置選項。