我刚刚用yo aspnetcore-spa创建了一个新项目。我正在尝试使用PrimeNG组件库。
然后我安装了font-awesome和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配置：
答案 0 :(得分：2)
正如我们从您的商家信息中看到的那样，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)(\?|$)/
它应该可以解决你的问题。
答案 1 :(得分：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'],
}
]}