webpack css-loader background-image 오류 로딩

Question

저는 Angular2 + ES2015 + Babel + Webpack 프로젝트에서 작업 중이며 CSS 파일에 이미지를 포함하고 css-loader을 사용할 때이 문제에 부딪 혔습니다. 이미 문제를 파악하고 있지만 지금까지 운이 없다 :

ERROR in ./src/app/home/home.component.css 
Module build failed: SyntaxError: /path/to/project/src/app/home/images/penguin.png: Unexpected character '�' (1:0) 
> 1 | �PNG 
    |^
    2 | 
    3 | 
    4 | IHDR��>a�gAMA��7��!�IDATx��]xTEמ�B�"�)"��� ��T?@?�iRiD�tPA��)"���$��K���K���wτ���f��M6a���OHؽ3s�3gΜ93#���>���x��}����>���x�Ƅ&���f&�o> 
               ��ɉI�O����#S�a-a 
                    �9�8!�W1<�)O�G�j��B� 
    at Parser.pp.raise (/path/to/project/node_modules/babylon/lib/parser/location.js:22:13) 
    at Parser.getTokenFromCode (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:561:12) 
    at Parser.readToken (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:180:21) 
    at Parser.readToken (/path/to/project/node_modules/babylon/lib/plugins/flow.js:164:22) 
    at Parser.nextToken (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:169:21) 
    at Parser.parse (/path/to/project/node_modules/babylon/lib/parser/index.js:128:12) 
    at parse (/path/to/project/node_modules/babylon/lib/index.js:47:47) 
    at File.parse (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:517:34) 
    at File.parseCode (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:603:20) 
    at /path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:49:12 
    at File.wrap (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:563:16) 
    at Pipeline.transform (/path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:47:17) 
    at Object.transformFileSync (/path/to/project/node_modules/babel-core/lib/api/node.js:144:10) 
    at compile (/path/to/project/node_modules/babel-register/lib/node.js:129:20) 
    at loader (/path/to/project/node_modules/babel-register/lib/node.js:158:14) 
    at Object.require.extensions.(anonymous function) [as .js] (/path/to/project/node_modules/babel-register/lib/node.js:168:7) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Module.require (module.js:353:17) 
    at require (internal/module.js:12:17) 
    at Object.<anonymous> (/path/to/project/src/app/home/home.component.css:6:2430) 
    at Module._compile (module.js:409:26) 
    at Object.loaderContext.exec (/path/to/project/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7) 
    at Object.module.exports (/path/to/project/node_modules/to-string-loader/src/to-string.js:6:54) 

당신이 you'l은 GitHub의 문제와 유래에 비슷한 상황을 찾을 오류에 대한 검색이있는 경우,하지만 완전히 동일. 그들 모두에서 이미지 로더가 부족하다는 지적이 있지만 (png 파일은 여기에 있습니다) 제 경우에는 완벽하게 작동합니다. require('../image/penguin.png')을 JS 파일에 직접로드하면로드되고 출력 경로로 내보내집니다!

내 공정 및 웹팩 구성은 다른 파일로 상당히 복잡한 크고 분할하지만, 여기에 오류

[...] 
.post-image { 
    height: 150px; 
    background-image: url(./images/penguin.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

에게 트리거 흥미로운 부분

import config from './config'; 

{ 
    [...] 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: [/node_modules/], 
     loader: 'eslint' 
     }, 
     { 
     test: /\.css$/, 
     exclude: [/node_modules/], 
     loader: 'postcss?pack=lint' 
     } 
    ], 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: [/node_modules/, /\.(spec|e2e)\.js$/], 
     loaders: [ 
      'babel', 
      'angular2-template' 
     ] 
     }, 
     { 
     test: /\.css$/, 
     exclude: [/node_modules/], 
     loaders: [ 
      'to-string', 
      'css?-import', 
      'postcss?pack=process' 
     ] 
     }, 
     { 
     test: /\.(png|jpe?g|gif)$/, 
     loaders: [ 
      'url?limit=10000&name=assets/images/[name].[ext]?[hash:20]', 
      'image-webpack?bypassOnDebug&optimizationLevel=6' 
     ] 
     }, 
     [...] 
    ] 
    }, 
    output: { 
    path: resolve(config.paths.dist), 
    publicPath: `http://${config.dev.host}:${config.dev.port}/`, 
    filename: '[name].js', 
    sourceMapFilename: '[name].map', 
    chunkFilename: '[id].chunk.js' 
    }, 
    [...] 
} 

과 CSS의 여기 조각 CSS에 to-string-loader을 사용하는 것이 이상한 경우 angular2-template-loader은 CSS를 인라인으로 Angular2에 직접 입력 할 수 있기 때문입니다. Cometet stylesUrl

오류 스택 때문에 css-loader가 정의 된 로더 (url! image-webpack)로로드되지 않고 babel-register로로드되는 작업을 완료 한 것처럼 보입니까? 그래서 CSS - 로더의 결과를 console.log 및 예상 이미지 require가 :

[...] 
exports.push([module.id, ".post-image{height:150px;background-image:url(" + require("./images/penguin.png") + ");background-position:50%;background-repeat:no-repeat}", ""]); 

그래서 내가 바벨 PNG 파일

{ 
    "presets": [ 
    "es2015", 
    "angular2", 
    "stage-3" 
    ], 
    "ignore": ["*.png"] 
} 

을 무시하고 바벨을 무시하기 때문에이 약간 다른 오류가 발생 만든 이미지는했지만 결국 같은 것 같다 :

ERROR in ./src/app/home/home.component.css 
Module build failed: SyntaxError: Unexpected token ILLEGAL 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:373:25) 
    at loader (/path/to/project/node_modules/babel-register/lib/node.js:158:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/path/to/project/node_modules/babel-register/lib/node.js:168:7) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Module.require (module.js:353:17) 
    at require (internal/module.js:12:17) 
    at Object.<anonymous> (/path/to/project/src/app/home/home.component.css:6:2430) 
    at Module._compile (module.js:409:26) 
    at Object.loaderContext.exec (/path/to/project/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7) 
    at Object.module.exports (/path/to/project/node_modules/to-string-loader/src/to-string.js:6:54) 

내가 단서가, 난 그냥 CSS 파일에 이미지 배경을 설정 WTF 갈거야 아니오 붙어해야 파이처럼 쉬워 야한다.

어떤 생각이라도 ??

Answer 1

마지막으로 작성했습니다.

문제의 출처는 체인의 끝에 있었다 : to-string-loader이

로더는 css-loader의 응답을 처리 할 수 ​​Loader.exec를 사용하지만이 코드는 로더 일부를 사용 정류장에서 issue

은 그렇다 알고있다 솔루션은 그 문제에서 찾을 수 있습니다. 그러나 가장 좋은 방법은 Mathias Raacke (@ooc)가 제안한 것처럼 애드 호크 로더를 만드는 것입니다. in this other issue

이렇게 많은 시간을 낭비하지 않기를 바랍니다.