Webpack 如何使用loader处理css中的png

我正在用webpack打包Angular2项目。 我的app.component.ts是：

import { Component } from '@angular/core';
import '../../public/css/styles.css';

@Component({
selector: 'my-app',
template:require('./app.component.html'),
styles: [require('./app.component.css')]
})
export class AppComponent {}

它的css

app.component.css

是：

main {
   padding: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
   margin-top: 50px;
   display: block;
   background: url("../../public/images/icon_background.png");
}

我的

webpack.common.js

如下：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
entry: {
   'polyfills': './src/polyfills.ts',
   'vendor': './src/vendor.ts',
   'app': './src/main.ts'
},

resolve: {
   extensions: ['', '.js', '.ts']
},

module: {
  loaders: [
         {
           test: /\.ts$/,
           loaders: ['ts', 'angular2-template-loader']
         },
         {
           test: /\.html$/,
           loader: 'html'
         },
         {
           test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
           loader: 'file?name=assets/[name].[hash].[ext]'
         },
         {
           test: /\.css$/,
           exclude: helpers.root('src', 'app'),
           loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
         },
         {
           test: /\.css$/,
           include: helpers.root('src', 'app'),
           loader: 'css/locals?module&localIdentName=    [name]__[local]___[hash:base64:5]'
          }
       ]
},

plugins: [
      new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
      }),

      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
   ]
};

然后我得到一个错误：

browser_adapter.js:84TypeError: t.replace is not a function
    at Function.t.replaceAllMapped (http://localhost/vendor.1f7c2e93d172be58c91c.js:64:3487)
    at Object.i [as extractStyleUrls] (http://localhost/vendor.1f7c2e93d172be58c91c.js:1128:213)
    at http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4044
    at Array.map (native)
    at t.normalizeStylesheet (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4020)
    at t.normalizeLoadedTemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:2301)
    at t.normalizeTemplateSync (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1841)
    at t.normalizeDirective (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1367)
    at t._getCompiledTemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2661)
    at t._getTransitiveCompiledTemplates (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2872)

我的

vender.ts

如下所示：

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

我尝试了css的“raw”，但是文件加载器不喜欢它，并且没有将

icon\u background.png

放入资产。

---

还有其他尝试过的，比如

“风格！css'

，

'css'

，

'css/locals'

，

加载器：['style loader'，'css loader？sourceMap']

也因获得上述

类型错误而失败。
我找到了一个解决方法，使用“css to string loader！”！css加载器“
我通过使用“css到字符串加载器！”！css加载器'