2017-04-22 10 views
2

yo aspnetcore-spaで新規プロジェクトを作成しました。私はPrimeNGコンポーネントライブラリを使用しようとしています。 それから私は、フォント素晴らしいとprimengインストール:WebPACKのベンダーのリストにCSSを追加するとprimeng.min.cssを読み込み中にWebpackエラーが発生しました

npm install font-awesome primeng --save 

を:

vendor: [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/platform-server', 
    'angular2-universal', 
    'angular2-universal-polyfills', 
    'bootstrap', 
    'bootstrap/dist/css/bootstrap.css', 
    'es6-shim', 
    'es6-promise', 
    'event-source-polyfill', 
    'jquery', 
    'zone.js', 
    'font-awesome/css/font-awesome.min.css', 
    'primeng/resources/primeng.min.css', 
    'primeng/resources/themes/omega/theme.css' 
] 

をそれから私は、ベンダーのファイルを更新しようとすると:

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js 

このエラーが表示されます:

E:\Astro\Clients\Astro.Clients.Web2>node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js 
Hash: 14e6030c6f54434f312fd1aeb5e7ace276110a5c 
Version: webpack 2.4.1 
Child 
    Hash: 14e6030c6f54434f312f 
    Time: 6812ms 
            Asset  Size Chunks     Chunk Names 
    674f50d287a8c48dc19ba404d20fe713.eot 166 kB   [emitted] 
    912ec66d7572ff821749319396470bde.svg 444 kB   [emitted] [big] 
    b06871f281fee6b241d60582ae9369b9.ttf 166 kB   [emitted] 
           vendor.js 4.74 MB  0 [emitted] [big] vendor 
           vendor.css 492 kB  0 [emitted] [big] vendor 

    ERROR in ./~/primeng/resources/images/line.gif 
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6) 
    You may need an appropriate loader to handle this file type. 
    (Source code omitted for this binary file) 
    @ ./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237 
    @ dll vendor 

    ERROR in ./~/primeng/resources/images/loading.gif 
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7) 
    You may need an appropriate loader to handle this file type. 
    (Source code omitted for this binary file) 
    @ ./~/primeng/resources/primeng.min.css 6:33379-33410 
    @ dll vendor 

    ERROR in ./~/primeng/resources/primeng.min.css 
    Module build failed: ModuleParseError: Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7) 
    You may need an appropriate loader to handle this file type. 
    (Source code omitted for this binary file) 
     at doBuild.e (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:296:19) 
     at runLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\webpack\lib\NormalModule.js:206:11) 
     at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:370:3 
     at iterateNormalLoaders (E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:211:10) 
     at E:\Astro\Clients\Astro.Clients.Web2\node_modules\loader-runner\lib\LoaderRunner.js:202:4 
     at E:\Astro\Clients\Astro.Clients.Web2\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:62:14 
     at _combinedTickCallback (internal/process/next_tick.js:73:7) 
     at process._tickCallback (internal/process/next_tick.js:104:9) 

    ERROR in E:\Astro\Clients\Astro.Clients.Web2\node_modules\extract-text-webpack-plugin\loader.js??ref--1-0!E:\Astro\Clients\Astro.Clients.Web2\node_modules\css-loader\index.js!E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\primeng.min.css doesn't export content 
    Child extract-text-webpack-plugin: 

     ERROR in ./~/primeng/resources/images/loading.gif 
     Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7) 
     You may need an appropriate loader to handle this file type. 
     (Source code omitted for this binary file) 
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410 

     ERROR in ./~/primeng/resources/images/line.gif 
     Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6) 
     You may need an appropriate loader to handle this file type. 
     (Source code omitted for this binary file) 
     @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237 
Child 
    Hash: d1aeb5e7ace276110a5c 
    Time: 6064ms 
            Asset  Size Chunks     Chunk Names 
    674f50d287a8c48dc19ba404d20fe713.eot 166 kB   [emitted] 
    912ec66d7572ff821749319396470bde.svg 444 kB   [emitted] [big] 
    b06871f281fee6b241d60582ae9369b9.ttf 166 kB   [emitted] 
           vendor.js 4.32 MB  0 [emitted] [big] vendor 

    ERROR in ./~/primeng/resources/images/line.gif 
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\line.gif Unexpected character '' (1:6) 
    You may need an appropriate loader to handle this file type. 
    (Source code omitted for this binary file) 
    @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:57692-57720 6:58209-58237 
    @ ./~/primeng/resources/primeng.min.css 
    @ dll vendor 

    ERROR in ./~/primeng/resources/images/loading.gif 
    Module parse failed: E:\Astro\Clients\Astro.Clients.Web2\node_modules\primeng\resources\images\loading.gif Unexpected character ' ' (1:7) 
    You may need an appropriate loader to handle this file type. 
    (Source code omitted for this binary file) 
    @ ./~/css-loader!./~/primeng/resources/primeng.min.css 6:33379-33410 
    @ ./~/primeng/resources/primeng.min.css 
    @ dll vendor 

webpackでエラーが発生しないようにするにはどうすればよいですか?

EDIT

尋ね、ここに私のWebPACKの設定があるよう:

+0

'このファイルタイプを処理するために適切なローダが必要な場合があります。 ' –

+3

' .gif'ファイルのローダはありません。 Webpack設定を貼り付けます。 –

+0

問題を解決するためにwebpack configのファイルローダー(または)URLローダーを使用してください。 – Vignesh

答えて

2

我々はWebPACKのはwebpack.config.vendor.js設定ファイルで実行されている、あなたのリストから見ることができるように - この設定で指定された node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

url-loadergifjpg拡張

{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } 

gifを追加してみ含まれていませんこの正規表現へのjpgtest: /\.(png|gif|jpe?g|woff|woff2|eot|ttf|svg)(\?|$)/ uldはあなたの問題を解決します。

+1

私はすでにgifを追加していましたが、これはうまくいきませんでした。 jpeを追加する?g固定... ....ありがとう:) – davaus

0

以下のコードを確認してください。

module: { 
      rules: [ 
      { 

       test: /\.(woff2|woff|ttf|eot|svg|png|jpe?g|gif|svg|ico)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, 
       use: [ 
        { 
         loader: 'url-loader?limit=100000' 
        } 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: ['style-loader', 'css-loader'], 
      } 

    ]} 
+0

しかし、なぜ私の現在のルールは機能しませんか? – J4N

+0

./~/primeng/resources/images/loading.gifリンクはnode_modulesフォルダを参照していますが、実行時にフォルダからイメージが展開されない – Vignesh

+0

動作していますか@ J4N – Vignesh

関連する問題