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

Question

题

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

背景

我想在angular-material框架之上创建一个带有自定义组件的UIkit .使用Webpack,我可以将我的自定义组件和角度材料捆绑在一起uikit.js,然后再将其移植到其他应用程序.但是,我不想将angular模块本身包含在内uikit.js.

问题

似乎Webpack"聪明"足以注意到angular模块是模块的依赖项angular-material,因此会将angular模块和angular-material模块导出到bundle.可以使用config.externals: {'angular': 'angular'}或new webpack.IgnorePlugin(/angular$/)排除angular在app中明确要求的模块,但对于peerDependency(即内部需要的那个angular-material),它仍然会包含它.

那么,我怎么能从出口中排除这个第三方依赖的模块呢？

例:

// 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$/)
  ]
};

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';
      }
    }
  }
};

这是解释 splitChunks 插件的 webpack 链接。