ローダーでCSSでpngを処理する方法

Question

私は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は、同じように怒鳴るexampleのとおりです。

// 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の「生の」試してみましたが、ファイル・ローダーは、それとの親愛なかったと資産へicon_background.pngを入れていません。 'style!css'、'css'、'css/locals'、loaders: [ 'style-loader', 'css-loader?sourceMap']のように試してみたところ、上記のようにTypeErrorを得ることで失敗しました。

Answer 1

「css-to-string-loader！css-loader」を使用して回避策を見つけました