webpack 上字体很棒的错误

error with font awesome on webpack

当我 运行 我的 webpack 构建命令

webpack --config .\webpack.config.vendor.js

我收到以下错误;

Webpack : TypeError: dep.getResourceIdentifier is not a function At line:1 char:1 + webpack --config .\webpack.config.vendor.js + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : NotSpecified: (TypeError: dep.... not a function:String) [], RemoteException + FullyQualifiedErrorId : NativeCommandError

at addDependency (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:387:30)
at iterationOfArrayCallback (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:78:3)
at addDependenciesBlock (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:407:5)
at Compilation.processModuleDependencies (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:418:4)
at afterBuild (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:686:13)
at buildModule.err (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:714:8)
at callback (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:342:35)
at module.build.error (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:378:12)
at DllModule.build (C:\Users\matt\Source\Repos\bemfeito\Bemfeito\Bemfeito.Services.Public\node_modules\webpack\lib\DllModule.js:36:10)
at Compilation.buildModule (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:346:10)
at moduleFactory.create (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:702:12)
at DllModuleFactory.create (C:\Users\matt\Source\Repos\bemfeito\Bemfeito\Bemfeito.Services.Public\node_modules\webpack\lib\DllModuleFactory.js:16:3)
at semaphore.acquire (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:649:18)
at Semaphore.acquire (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\util\Semaphore.js:16:4)
at Compilation._addModuleChain (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:648:18)
at Compilation.addEntry (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:732:8)
at compiler.plugin (C:\Users\matt\Source\Repos\bemfeito\Bemfeito\Bemfeito.Services.Public\node_modules\webpack\lib\DllEntryPlugin.js:28:16)
at AsyncParallelHook.eval [as callAsync] (eval at create (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12),

:7:1) at AsyncParallelHook.lazyCompileHook [as _callAsync] (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21) at hooks.beforeCompile.callAsync.err (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:475:20) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :6:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21) at Compiler.compile (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:468:28) at readRecords.err (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:216:11) at Compiler.readRecords (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:338:11) at hooks.run.callAsync.err (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:213:10) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :6:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21) at hooks.beforeRun.callAsync.err (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:210:19) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :15:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21) at Compiler.run (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:207:24) at runWit hDependencies (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\MultiCompiler.js:253:15) at asyncLib.map (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\lib\MultiCompiler.js:177:6) at arrayEachIndex (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\neo-async\async.js:2494:9) at Object.map (C:\Users\matt\AppData\Roaming\npm\node_modules\webpack\node_modules\neo-async\async.js:2845:9)

我的webpack.config.vendor.js如下;

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
    'font-awesome/css/font-awesome.css',
    'node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css'
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\|\/)core(\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            // To keep development builds fast, include all vendor dependencies in the vendor bundle.
            // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        entry: { vendor: allModules.concat(['aspnet-prerendering']) },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
        },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}

我的package.json如下;

{
  "name": "Bemfeito.Services.Public",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cli": "1.6.3",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngtools/webpack": "1.10.0-beta.3",
    "@ngx-translate/core": "9.1.1",
    "@ngx-translate/http-loader": "2.0.1",
    "@types/chai": "4.1.2",
    "@types/jasmine": "2.8.6",
    "@types/webpack-env": "1.13.5",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "angular2-useful-swiper": "5.0.1",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^4.0.1",
    "bootstrap": "4.0.0",
    "chai": "^4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.9",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "1.1.11",
    "flag-icon-css": "3.0.0",
    "font-awesome": "4.7.0",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.9.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "karma": "^2.0.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "^3.0.0",
    "ngx-bootstrap": "2.0.2",
    "ngx-rating": "0.0.9",
    "popper.js": "1.12.9",
    "preboot": "6.0.0-beta.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "5.5.6",
    "style-loader": "0.20.3",
    "to-string-loader": "1.1.5",
    "tsconfig-paths-webpack-plugin": "^3.0.2",
    "typescript": "2.7.1",
    "url-loader": "0.6.2",
    "webpack": "^3.11.0",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.14"
  },
  "dependencies": {}
}

谁能告诉我我做错了什么?我找不到关于这个问题的任何其他信息,所以假设这是我在本地做的事情。

我是 运行ning Microsoft Visual Studio 2017 社区,在 .net core 2 angular SPA 模板中。

太棒了,我们想通了。
所以答案只是版本问题。最近对 webpack 4 的更改使这变得非常麻烦。 4 不太稳定,但如果你使用 3,你必须检查每个包,因为大多数支持 4 的包都不能向后兼容。

至于为什么 运行 webpack 在本地有问题,我不知道。但我也不使用 Windows.
不过,您应该尝试为此找到一种解决方案,如果您在开始拥有多个项目后必须在全球范围内进行版本控制,那么版本控制会变得更加困难。