Angular2 组件 - Webpack 生成大包答案

【问题标题】：Angular2 component - Webpack producing large bundleAngular2 组件 - Webpack 生成大包
【发布时间】：2017-03-04 18:21:52
【问题描述】：

我正在为 Angular (2+) 开发第三方日期选择器组件。以前我使用 Rollup 进行捆绑，但是由于处理 MomentJS 导入的不断问题，我希望用 Webpack 替换 Rollup。我有 Webpack 工作，但文件大小差异很大；

汇总 - 32kb
Webpack - 504kb

在查看生成的 Webpack 包时，似乎所有依赖项都被捆绑（Angular 等）。如何向 Webpack 指定我只想捆绑组件的文件并忽略供应商代码？

两个配置文件供参考；

// rollup.config.js

export default {
  entry: 'dist/index.js',
  dest: 'dist/bundles/bundle.js',
  sourceMap: false,
  format: 'umd',
  moduleName: 'ng.myModule',
  globals: {
    '@angular/core': 'ng.core',
    '@angular/core/testing': 'ng.core.testing',
    '@angular/common': 'ng-common',
    '@angular/forms': 'ng-forms',
    'rxjs/Observable': 'Rx',
    'rxjs/ReplaySubject': 'Rx',
    'rxjs/add/operator/map': 'Rx.Observable.prototype',
    'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
    'rxjs/add/operator/pluck': 'Rx.Observable.prototype',
    'rxjs/add/operator/first': 'Rx.Observable.prototype',
    'rxjs/add/observable/fromEvent': 'Rx.Observable',
    'rxjs/add/observable/merge': 'Rx.Observable',
    'rxjs/add/observable/throw': 'Rx.Observable',
    'rxjs/add/observable/of': 'Rx.Observable'
  }
}

// webpack.config.js

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

const config = {
  entry: path.resolve(__dirname, 'dist/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundles/bundle.js',
    libraryTarget: 'umd'
  },
  plugins: [
    new UglifyJsPlugin({
      beautify: false,
      output: {
        comments: false
      },
      mangle: {
        screw_ie8: true
      },
      compress: {
        screw_ie8: true,
        warnings: false,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
        negate_iife: false
      },
    })
  ]
};

module.exports = config;

【问题讨论】：

标签： angular webpack

【解决方案1】：

我想（尴尬地）感谢this SO question，我刚刚找到了答案

安装 webpack-node-externals，添加到 externals: [nodeExternals()] 到 webpack.config.js 并重新运行构建，输出结果为 24kb（甚至比 Rollup 还要小！）。

【讨论】：