4

私は 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)

エラーを検索すると、githubの問題とstackoverflowで同様の状況が見つかりますが、まったく同じではありません. それらのすべてで、画像ローダーの欠如が指摘されています（pngファイルはこちら）が、私の場合は完全に機能しています。直接 JS ファイル上にある場合は、ロードされて出力パスにエクスポートされます!require('../image/penguin.png')

私のプロセスと Webpack の構成は非常に複雑で大きく、異なるファイルに分割されていますが、興味深い部分は次のとおりです。

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の一部

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

to-string-loaderCSSに使用するのが奇妙に見える場合は、 angular2-template-loaderCSS を Angular2 Componet に直接インライン化できるためです。stylesUrl

エラースタックのため、css-loader がジョブを完了すると、png ファイルは定義されたローダー (url!image-webpack) でロードされていないように見えますが、babel-register でロードされますか? だから私console.logはcss-loaderからの結果であり、期待される画像がありますrequire:

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

だから私はbabelにpngファイルを無視させました

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

そして、babelは画像を無視しているため、これはわずかに異なるエラーをスローしますが、最終的には同じようです:

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)

私は手がかりがなくて立ち往生しています.WTFは、CSSファイルに画像の背景を設定するだけで簡単にできるはずです.

何かご意見は？？

4

1 に答える 1

4

最後にそれを作った。

問題の原因は、チェーンの最後にありました。to-string-loader

ローダーはLoader.execからの応答を処理するために使用しcss-loaderますが、このコードには既知の問題があります

ローダーの使用を停止することとは別に、その問題でいくつかの解決策を見つけることができます。しかし、Mathias Raacke (@ooc)がこの別号で提案したように、アドホック ローダーを作成するのが断然最良の方法です。

これが他の誰かがこれほど多くの時間を無駄にしないのに役立つことを願っています!

于 2016-07-17T19:36:23.233 に答える