的WebPack不加載svgs

Question

我有以下app structure：

/webapp 
    /lib 
    /assets 
     ic_add_black_24px.svg 
     ic_clear_black_24px.svg 
     .. 
     .. 

這裏是我的webpack.config.js：

var path = require('path'), 
    webpack = require("webpack"), 
    libPath = path.join(__dirname, 'lib'), 
    wwwPath = path.join(__dirname, 'www'), 
    pkg = require(path.join(__dirname,'package.json')), 
    HtmlWebpackPlugin = require('html-webpack-plugin'); 


var config = { 
    entry: path.join(libPath, 'index.js'), 
    output: { 
     path: path.join(wwwPath), 
     filename: 'bundle-[hash:6].js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.html$/, 
      loader: 'file?name=templates/[name]-[hash:6].html' 
     }, { 
      test: /\.(png|jpg|svg)$/, 
      loader: 'file-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest 
     }, { 
      test: /\.css$/, 
      loader: "style!css" 
     }, { 
      test: /\.scss$/, 
      loader: "style!css!autoprefixer!sass" 
     }, { 
      test: /\.js$/, 
      exclude: /(node_modules)/, 
      loader: "ng-annotate?add=true!babel" 
     }, { 
      test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/], 
      loader: 'file?name=fonts/[name].[ext]' 
     }] 
    }, 
    plugins: [ 
     // HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      pkg: pkg, 
      template: path.join(libPath, 'index.html') 
     }), 

     // OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin 
     new webpack.optimize.OccurenceOrderPlugin(), 

     // Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication 
     new webpack.optimize.DedupePlugin() 
    ] 
}; 

module.exports = config; 

這裏是我如何在我的HTML文件的一個使用​​：

<md-card-header> 
      <span flex></span> 
      <md-button class="md-icon-button" aria-label="remove condition" style="background-color: #DCD8D8" ng-click="event.removeCondition(condition)"> 
       <md-icon md-svg-src="/lib/assets/ic_clear_black_24px.svg"></md-icon> 
      </md-button> 
     </md-card-header> 

當我做rm -rf www/* && webpack -p時，它創建了包s成功，但沒有任何資產加載..我試圖使用svg-loader, url-loader, file，但他們都沒有工作..我在這裏做錯了什麼？

Answer 1

萬一它幫助任何人，我最終使用CopyWebpackPlugin手動加載資產到我所需的位置。這就是我的webpack.config現在看起來像：

var path = require('path'), 
    webpack = require("webpack"), 
    libPath = path.join(__dirname, 'lib'), 
    wwwPath = path.join(__dirname, 'www'), 
    pkg = require(path.join(__dirname,'package.json')), 
    CopyWebpackPlugin = require('copy-webpack-plugin'), 
    HtmlWebpackPlugin = require('html-webpack-plugin'); 


var config = { 
    entry: path.join(libPath, 'index.js'), 
    output: { 
     path: path.join(wwwPath), 
     filename: 'bundle-[hash:6].js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.html$/, 
      loader: 'file?name=templates/[name]-[hash:6].html' 
     }, { 
      test: /\.(png|jpg|svg)$/, 
      loader: 'svg-url-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest 
     }, { 
      test: /\.css$/, 
      loader: "style!css" 
     }, { 
      test: /\.scss$/, 
      loader: "style!css!autoprefixer!sass" 
     }, { 
      test: /\.js$/, 
      exclude: /(node_modules)/, 
      loader: "ng-annotate?add=true!babel" 
     }, { 
      test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/], 
      loader: 'file?name=fonts/[name].[ext]' 
     }] 
    }, 
    plugins: [ 
     new CopyWebpackPlugin([{ 
       from: 'lib/assets', 
       to: wwwPath + '/lib/assets' 
      }]), 
     // HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin 
     new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      pkg: pkg, 
      template: path.join(libPath, 'index.html') 
     }), 

     // OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin 
     new webpack.optimize.OccurenceOrderPlugin(), 

     // Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication 
     new webpack.optimize.DedupePlugin() 
    ] 
}; 

module.exports = config;