Question

我正在尝试迁移我的Angular 6应用程序以使用Webpack 4而不是Webpack 3，但是当我运行应用程序时出现以下错误：

compiler.js:215 Uncaught Error: Can't resolve all parameters for IntroComponent: (?).

使用以下优化时，不会发生上述错误：

optimization = {
  splitChunks: {
    chunks: 'all'
  }
}

这将生成以下包：

main.js
main.js.map
polyfills.js
polyfills.js.map
vendor.js
vendor.js.map
厂商〜main.js
厂商〜main.js.map
厂商〜polyfills.js
厂商〜polyfills.js.map
厂商〜vendor.js
厂商〜vendor.js.map

根据这些条目：

entry: {
  polyfills: helpers.root('/client/src/polyfills.ts'),
  vendor: helpers.root('/client/src/vendor.ts'),
  main: helpers.root('/client/src/main.ts'),
},

现在我正在尝试只生成三个捆绑包并使应用程序正常工作：

main.js
vendor.js
polyfills.js

所以我用这种方式改变了优化：

optimization = {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      polyfills: {
        name: 'polyfills',
        test: /polyfills|core-js|zone/,
        chunks: 'all',
        priority: 2,
        enforce: true
      },
      vendor: {
        name: 'vendor',
        test: /node_modules/,
        chunks: 'all',
        priority: 1,
        enforce: true
      }
    }
  },
};

这成功生成了我想要的三个包，但是当我运行应用程序时，我得到之前提到的错误：

compiler.js:215 Uncaught Error: Can't resolve all parameters for IntroComponent: (?).

我比较了包vendor.js和以前的供应商~main.js，唯一的区别是：

> /***/ "./node_modules/webpack/buildin/global.js":
> /*!***********************************!*\
>   !*** (webpack)/buildin/global.js ***!
>   \***********************************/
> /*! no static exports found */
> /*! ModuleConcatenation bailout: Module is not an ECMAScript module */
> /***/ (function(module, exports) {
> 
> var g;
> 
> // This works in non-strict mode
> g = (function() {
>   return this;
> })();
> 
> try {
>   // This works if eval is allowed (see CSP)
>   g = g || Function("return this")() || (1, eval)("this");
> } catch (e) {
>   // This works if the window reference is available
>   if (typeof window === "object") g = window;
> }
> 
> // g can still be undefined, but nothing to do about it...
> // We return undefined, instead of nothing here, so it's
> // easier to handle this case. if(!global) { ...}
> 
> module.exports = g;
> 
> 
> /***/ }),
>

其他捆绑包较小，看起来很相似。我怎么解决这个问题？这次移植让我感到很头疼。

更新：

我无法通过分离到供应商和polyfills解决，但我以此优化配置结束：

const optimization = {
splitChunks: {
  cacheGroups: {
    vendor: {
      name: 'vendor',
      test: /\/node_modules\//,
      chunks: 'all',
      priority: 0,
      enforce: true,
    },
  },
},

无法运行使用Webpack 4和SplitChunksPlugin

0 个答案: