如何在Webpack中从导出中排除供应商模块peerDependencies？

Question

问题

在Webpack中导出捆绑包时，如何排除第三方模块的peerDependency？ （不是第三方模块本身）

背景

我想在uikit.js框架之上创建一个包含自定义组件的UIkit。使用Webpack，我可以将我的自定义组件和角度材料捆绑在一起，形成angular之类的东西，然后再移植到其他应用程序。但是，我不想将uikit.js模块本身包含在此angular中。

问题

似乎Webpack“聪明”到足以注意angular-material模块是angular模块的依赖关系，因此会导出angular-material模块和config.externals: {'angular': 'angular'}模块捆绑。可以使用new webpack.IgnorePlugin(/angular$/)或angular来排除应用程序中明确要求的angular-material模块，但是对于peerDependency（即需要在// app.js var angular = require('angular'); var material = require('angular-material'); // ... other application logic // webpack.config.js var webpack = require('webpack'); module.exports = { entry: { app: './app.js' }, module: { loaders: [ // some module loaders ] }, // This only excludes the angular module require by the app, not the one require by the angular-material externals: {'angular': 'angular'}, plugins: [ // This is the same as externals, only the one required by app.js would be excluded new webpack.IgnorePlugin(/angular$/) ] }; 内部的那个），它仍然会包括它。

那么，我如何从导出中排除这个第三方依赖模块？

实施例

from scipy.linalg import circulant
import numpy as np

>>> arr = circulant(np.arange(1,7)).T
>>> np.triu(arr, 1).T + np.triu(arr)

array([[1, 2, 3, 4, 5, 6],
       [2, 1, 2, 3, 4, 5],
       [3, 2, 1, 2, 3, 4],
       [4, 3, 2, 1, 2, 3],
       [5, 4, 3, 2, 1, 2],
       [6, 5, 4, 3, 2, 1]])

Answer 1

在webpack（第4版）配置中，我将供应商应用程序导出到供应商捆绑包中，并像这样对所有东西进行分块：

entry: {
  app: './app.js',
  vendor: [ 'angular', 'angular-material', '...' ],
},
optimization: {
  splitChunks: {
    chunks: 'all',
  }
},

基本上，这表明将选择要优化的块，all意味着即使在异步块和非异步块之间也可以共享这些块。此外，如何构建模块以及如何处理依赖关系可以进一步简化块的大小。

此外，您可以提供一个函数，该函数的返回值将指示是否包括每个块：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks (chunk) {
        // exclude `my-excluded-chunk`
        return chunk.name !== 'my-excluded-chunk';
      }
    }
  }
};

这里是link to webpack，解释splitChunks插件。