加載時出現Webpack錯誤primeng.min.css

Question

我剛剛創建了一個新項目yo aspnetcore-spa。我試圖使用PrimeNG組件庫。 然後我安裝字體真棒，primeng：

npm install font-awesome primeng --save 

然後添加CSS到的WebPack供應商名單：

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沒有錯誤？

編輯

至於問，這裏是我的WebPack配置：

• webpack.config.js
• webpack.config.vendor.js

Answer 1

我們可以從你的清單中看到，的WebPack與webpack.config.vendor.js配置文件運行 - node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js

url-loader在此配置不包括gif和jpg擴展

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

試加gif規定和jpg到這個正則表達式：test: /\.(png|gif|jpe?g|woff|woff2|eot|ttf|svg)(\?|$)/ 這是笑你可以解決你的問題。

Answer 2

檢查下面的代碼。

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'], 
      } 

    ]}