Question

我正在为Angular（2+）开发第三方datepicker组件。以前我使用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;

Answer 1

我觉得（令人尴尬）我刚刚找到答案，感谢this SO question

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

Angular2组件 - Webpack生成大包

1 个答案: