【发布时间】：2016-01-20 17:18:06
【问题描述】：
我试图理解为什么 webpack 会为我的简单 Angular 设置生成如此庞大的文件。
我想尝试用 webpack 制作 Angular 5 min quickstart。
5 分钟快速入门在 html 3 个供应商脚本中包括以下文件（它实际上包括 4 个文件，但最后一个是我在 webpack 设置中不需要的 system.js）：
ff$ ls -lh node_modules/angular2/bundles/angular2-polyfills.js node_modules/systemjs/dist/system.src.js node_modules/rxjs/bundles/Rx.js node_modules/angular2/bundles/angular2.dev.js
-rw-r--r-- 1 ff staff 116K Dec 15 21:12 node_modules/angular2/bundles/angular2-polyfills.js
-rw-r--r-- 1 ff staff 1.0M Dec 15 21:12 node_modules/angular2/bundles/angular2.dev.js
-rw-r--r-- 1 ff staff 363K Dec 15 02:44 node_modules/rxjs/bundles/Rx.js
而且这些文件并没有最小化，总共大约 1.5MB。
但是当我运行我的 webpack 脚本时：
module.exports = {
entry: './src/boot.ts',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
};
会产生以下两个文件：
ff$ ls -lh bundle*
-rw-r--r-- 1 ff staff 4.0M Jan 20 19:14 bundle.js
-rw-r--r-- 1 ff staff 4.2M Jan 20 19:14 bundle.js.map
为什么捆绑文件比 5 分钟快速入门包含的供应商脚本大得多？这个捆绑包中我的部分只有几个字节......
这是我运行 webpack 命令时的输出：
ff$ webpack --display-modules
ts-loader: Using typescript@1.7.5 and /Users/ff/testing/tsconfig.json
Hash: 9d7f1ef3b0818c188e33
Version: webpack 1.12.11
Time: 4823ms
Asset Size Chunks Chunk Names
bundle.js 4.19 MB 0 [emitted] main
bundle.js.map 4.45 MB 0 [emitted] main
[0] ./src/boot.ts 195 bytes {0} [built]
[1] ./~/angular2/platform/browser.js 13.1 kB {0} [built]
[2] ./~/angular2/src/core/angular_entrypoint.js 3.1 kB {0} [built]
[3] ./~/angular2/src/facade/lang.js 51 kB {0} [built]
[4] ./~/angular2/src/platform/browser_common.js 13.3 kB {0} [built]
[5] ./~/angular2/src/core/di.js 4.34 kB {0} [built]
[6] ./~/angular2/src/core/di/metadata.js 20.5 kB {0} [built]
[7] ./~/angular2/src/core/di/decorators.js 4.24 kB {0} [built]
[8] ./~/angular2/src/core/util/decorators.js 31.9 kB {0} [built]
[9] ./~/angular2/src/core/di/forward_ref.js 4.78 kB {0} [built]
[10] ./~/angular2/src/core/di/injector.js 128 kB {0} [built]
[11] ./~/angular2/src/facade/collection.js 45.7 kB {0} [built]
[12] ./~/angular2/src/core/di/provider.js 66 kB {0} [built]
[13] ./~/angular2/src/facade/exceptions.js 7.99 kB {0} [built]
[14] ./~/angular2/src/facade/exception_handler.js 18.3 kB {0} [built]
[15] ./~/angular2/src/core/reflection/reflection.js 1.57 kB {0} [built]
[16] ./~/angular2/src/core/reflection/reflector.js 22.2 kB {0} [built]
[17] ./~/angular2/src/core/reflection/reflection_capabilities.js 35.3 kB {0} [built]
[18] ./~/angular2/src/core/di/key.js 8.43 kB {0} [built]
[19] ./~/angular2/src/core/di/type_literal.js 1.38 kB {0} [built]
[20] ./~/angular2/src/core/di/exceptions.js 29.4 kB {0} [built]
[21] ./~/angular2/src/core/di/opaque_token.js 3.83 kB {0} [built]
[22] ./~/angular2/core.js 4.54 kB {0} [built]
[23] ./~/angular2/src/core/metadata.js 82.6 kB {0} [built]
[24] ./~/angular2/src/core/metadata/di.js 32.1 kB {0} [built]
[25] ./~/angular2/src/core/metadata/directives.js 84.6 kB {0} [built]
[26] ./~/angular2/src/core/change_detection.js 1.83 kB {0} [built]
[27] ./~/angular2/src/core/change_detection/change_detection.js 8.63 kB {0} [built]
[28] ./~/angular2/src/core/change_detection/differs/iterable_differs.js 10.8 kB {0} [built]
[29] ./~/angular2/src/core/change_detection/differs/default_iterable_differ.js 81.3 kB {0} [built]
[30] ./~/angular2/src/core/change_detection/differs/keyvalue_differs.js 10.5 kB {0} [built]
[31] ./~/angular2/src/core/change_detection/differs/default_keyvalue_differ.js 48 kB {0} [built]
[32] ./~/angular2/src/core/change_detection/parser/ast.js 55 kB {0} [built]
[33] ./~/angular2/src/core/change_detection/parser/lexer.js 59.3 kB {0} [built]
[34] ./~/angular2/src/core/change_detection/parser/parser.js 97.6 kB {0} [built]
[35] ./~/angular2/src/core/change_detection/parser/locals.js 5.72 kB {0} [built]
[36] ./~/angular2/src/core/change_detection/exceptions.js 8.78 kB {0} [built]
[37] ./~/angular2/src/core/change_detection/interfaces.js 5.91 kB {0} [built]
[38] ./~/angular2/src/core/change_detection/constants.js 9.2 kB {0} [built]
[39] ./~/angular2/src/core/change_detection/proto_change_detector.js 78.3 kB {0} [built]
[40] ./~/angular2/src/core/change_detection/change_detection_util.js 35.3 kB {0} [built]
[41] ./~/angular2/src/core/change_detection/pipe_lifecycle_reflector.js 800 bytes {0} [built]
[42] ./~/angular2/src/core/change_detection/binding_record.js 25.4 kB {0} [built]
[43] ./~/angular2/src/core/change_detection/directive_record.js 6.52 kB {0} [built]
[44] ./~/angular2/src/core/change_detection/dynamic_change_detector.js 71 kB {0} [built]
[45] ./~/angular2/src/core/change_detection/abstract_change_detector.js 49.5 kB {0} [built]
[46] ./~/angular2/src/core/change_detection/change_detector_ref.js 11.4 kB {0} [built]
[47] ./~/angular2/src/core/profile/profile.js 8.08 kB {0} [built]
[48] ./~/angular2/src/core/profile/wtf_impl.js 4.31 kB {0} [built]
[49] ./~/angular2/src/core/change_detection/observable_facade.js 611 bytes {0} [built]
[50] ./~/angular2/src/core/change_detection/proto_record.js 9.82 kB {0} [built]
[51] ./~/angular2/src/core/change_detection/event_binding.js 1.37 kB {0} [built]
[52] ./~/angular2/src/core/change_detection/coalesce.js 24.8 kB {0} [built]
[53] ./~/angular2/src/core/change_detection/jit_proto_change_detector.js 3.43 kB {0} [built]
[54] ./~/angular2/src/core/change_detection/change_detection_jit_generator.js 70.4 kB {0} [built]
[55] ./~/angular2/src/core/change_detection/codegen_name_util.js 30.1 kB {0} [built]
[56] ./~/angular2/src/core/change_detection/codegen_logic_util.js 33.8 kB {0} [built]
[57] ./~/angular2/src/core/change_detection/codegen_facade.js 2.15 kB {0} [built]
[58] ./~/angular2/src/core/metadata/view.js 10.7 kB {0} [built]
[59] ./~/angular2/src/core/util.js 546 bytes {0} [built]
[60] ./~/angular2/src/core/prod_mode.js 479 bytes {0} [built]
[61] ./~/angular2/src/facade/facade.js 1.14 kB {0} [built]
[62] ./~/angular2/src/facade/async.js 21.4 kB {0} [built]
[63] ./~/angular2/src/facade/promise.js 7.21 kB {0} [built]
[64] ./~/rxjs/Subject.js 6.22 kB {0} [built]
[65] ./~/rxjs/Observable.js 5.94 kB {0} [built]
[66] ./~/rxjs/Subscriber.js 4.44 kB {0} [built]
[67] ./~/rxjs/util/noop.js 103 bytes {0} [built]
[68] ./~/rxjs/util/throwError.js 107 bytes {0} [built]
[69] ./~/rxjs/util/tryOrOnError.js 335 bytes {0} [built]
[70] ./~/rxjs/Subscription.js 2.96 kB {0} [built]
[71] ./~/rxjs/symbol/rxSubscriber.js 514 bytes {0} [built]
[72] ./~/rxjs/util/SymbolShim.js 2.09 kB {0} [built]
[73] ./~/rxjs/util/root.js 672 bytes {0} [built]
[74] (webpack)/buildin/module.js 251 bytes {0} [built]
[75] ./~/rxjs/subject/SubjectSubscription.js 1.46 kB {0} [built]
[76] ./~/rxjs/observable/fromPromise.js 3.16 kB {0} [built]
[77] ./~/rxjs/scheduler/queue.js 140 bytes {0} [built]
[78] ./~/rxjs/scheduler/QueueScheduler.js 1.35 kB {0} [built]
[79] ./~/rxjs/scheduler/QueueAction.js 1.55 kB {0} [built]
[80] ./~/rxjs/scheduler/FutureAction.js 1.53 kB {0} [built]
[81] ./~/rxjs/operator/toPromise.js 750 bytes {0} [built]
[82] ./~/angular2/src/core/application_ref.js 58.6 kB {0} [built]
[83] ./~/angular2/src/core/zone/ng_zone.js 52.3 kB {0} [built]
[84] ./~/angular2/src/core/application_tokens.js 6.65 kB {0} [built]
[85] ./~/angular2/src/core/testability/testability.js 18.5 kB {0} [built]
[86] ./~/angular2/src/core/linker/dynamic_component_loader.js 23.8 kB {0} [built]
[87] ./~/angular2/src/core/linker/compiler.js 8.74 kB {0} [built]
[88] ./~/angular2/src/core/linker/proto_view_factory.js 56.4 kB {0} [built]
[89] ./~/angular2/src/core/render/api.js 34.5 kB {0} [built]
[90] ./~/angular2/src/core/pipes/pipe_provider.js 3.55 kB {0} [built]
[91] ./~/angular2/src/core/pipes/pipes.js 6.73 kB {0} [built]
[92] ./~/angular2/src/core/change_detection/pipes.js 1.03 kB {0} [built]
[93] ./~/angular2/src/core/linker/view.js 51.2 kB {0} [built]
[94] ./~/angular2/src/core/linker/view_ref.js 15.9 kB {0} [built]
[95] ./~/angular2/src/core/render/util.js 2.38 kB {0} [built]
[96] ./~/angular2/src/core/linker/element_binder.js 2.76 kB {0} [built]
[97] ./~/angular2/src/core/linker/element_injector.js 170 kB {0} [built]
[98] ./~/angular2/src/core/linker/view_manager.js 62 kB {0} [built]
[99] ./~/angular2/src/core/linker/view_manager_utils.js 48.1 kB {0} [built]
[100] ./~/angular2/src/core/linker/element_ref.js 8.44 kB {0} [built]
[101] ./~/angular2/src/core/linker/template_ref.js 6.97 kB {0} [built]
[102] ./~/angular2/src/core/linker/view_pool.js 6.69 kB {0} [built]
[103] ./~/angular2/src/core/linker/view_listener.js 2.44 kB {0} [built]
[104] ./~/angular2/src/core/linker/view_container_ref.js 18.9 kB {0} [built]
[105] ./~/angular2/src/core/linker/directive_lifecycle_reflector.js 4.21 kB {0} [built]
[106] ./~/angular2/src/core/linker/interfaces.js 21.4 kB {0} [built]
[107] ./~/angular2/src/core/linker/query_list.js 8.98 kB {0} [built]
[108] ./~/angular2/src/core/linker/event_config.js 3.95 kB {0} [built]
[109] ./~/angular2/src/core/linker/directive_resolver.js 19.4 kB {0} [built]
[110] ./~/angular2/src/core/linker/view_resolver.js 15.2 kB {0} [built]
[111] ./~/angular2/src/core/linker/pipe_resolver.js 5.06 kB {0} [built]
[112] ./~/angular2/src/core/platform_directives_and_pipes.js 4.26 kB {0} [built]
[113] ./~/angular2/src/core/linker/template_commands.js 23.7 kB {0} [built]
[114] ./~/angular2/src/core/console.js 2.08 kB {0} [built]
[115] ./~/angular2/src/core/zone.js 621 bytes {0} [built]
[116] ./~/angular2/src/core/render.js 1.86 kB {0} [built]
[117] ./~/angular2/src/core/linker.js 3.33 kB {0} [built]
[118] ./~/angular2/src/core/debug/debug_element.js 30.4 kB {0} [built]
[119] ./~/angular2/src/core/platform_common_providers.js 2.37 kB {0} [built]
[120] ./~/angular2/src/core/application_common_providers.js 6.53 kB {0} [built]
[121] ./~/angular2/common.js 892 bytes {0} [built]
[122] ./~/angular2/src/common/pipes.js 4.95 kB {0} [built]
[123] ./~/angular2/src/common/pipes/async_pipe.js 16.6 kB {0} [built]
[124] ./~/angular2/src/common/pipes/invalid_pipe_argument_exception.js 2.05 kB {0} [built]
[125] ./~/angular2/src/common/pipes/uppercase_pipe.js 4.11 kB {0} [built]
[126] ./~/angular2/src/common/pipes/lowercase_pipe.js 4.08 kB {0} [built]
[127] ./~/angular2/src/common/pipes/json_pipe.js 3.16 kB {0} [built]
[128] ./~/angular2/src/common/pipes/slice_pipe.js 10.2 kB {0} [built]
[129] ./~/angular2/src/common/pipes/date_pipe.js 16.2 kB {0} [built]
[130] ./~/angular2/src/facade/intl.js 15.1 kB {0} [built]
[131] ./~/angular2/src/common/pipes/number_pipe.js 20.6 kB {0} [built]
[132] ./~/angular2/src/common/directives.js 2.17 kB {0} [built]
[133] ./~/angular2/src/common/directives/ng_class.js 23.5 kB {0} [built]
[134] ./~/angular2/src/common/directives/ng_for.js 23.1 kB {0} [built]
[135] ./~/angular2/src/common/directives/ng_if.js 6.34 kB {0} [built]
[136] ./~/angular2/src/common/directives/ng_style.js 11.3 kB {0} [built]
[137] ./~/angular2/src/common/directives/ng_switch.js 25.9 kB {0} [built]
[138] ./~/angular2/src/common/directives/observable_list_diff.js 820 bytes {0} [built]
[139] ./~/angular2/src/common/directives/core_directives.js 4.5 kB {0} [built]
[140] ./~/angular2/src/common/forms.js 7.51 kB {0} [built]
[141] ./~/angular2/src/common/forms/model.js 62.7 kB {0} [built]
[142] ./~/angular2/src/common/forms/directives/abstract_control_directive.js 6.67 kB {0} [built]
[143] ./~/angular2/src/common/forms/directives/control_container.js 2.87 kB {0} [built]
[144] ./~/angular2/src/common/forms/directives/ng_control_name.js 17.2 kB {0} [built]
[145] ./~/angular2/src/common/forms/directives/ng_control.js 3.17 kB {0} [built]
[146] ./~/angular2/src/common/forms/directives/control_value_accessor.js 2.16 kB {0} [built]
[147] ./~/angular2/src/common/forms/directives/shared.js 16.5 kB {0} [built]
[148] ./~/angular2/src/common/forms/validators.js 14.8 kB {0} [built]
[149] ./~/angular2/src/common/forms/directives/default_value_accessor.js 7.41 kB {0} [built]
[150] ./~/angular2/src/common/forms/directives/number_value_accessor.js 6.83 kB {0} [built]
[151] ./~/angular2/src/common/forms/directives/checkbox_value_accessor.js 6.34 kB {0} [built]
[152] ./~/angular2/src/common/forms/directives/select_control_value_accessor.js 9.37 kB {0} [built]
[153] ./~/angular2/src/common/forms/directives/normalize_validator.js 1.38 kB {0} [built]
[154] ./~/angular2/src/common/forms/directives/ng_form_control.js 15.4 kB {0} [built]
[155] ./~/angular2/src/common/forms/directives/ng_model.js 12.9 kB {0} [built]
[156] ./~/angular2/src/common/forms/directives/ng_control_group.js 13.7 kB {0} [built]
[157] ./~/angular2/src/common/forms/directives/ng_form_model.js 20.7 kB {0} [built]
[158] ./~/angular2/src/common/forms/directives/ng_form.js 22.1 kB {0} [built]
[159] ./~/angular2/src/common/forms/directives/ng_control_status.js 8.41 kB {0} [built]
[160] ./~/angular2/src/common/forms/directives.js 9.03 kB {0} [built]
[161] ./~/angular2/src/common/forms/directives/validators.js 12 kB {0} [built]
[162] ./~/angular2/src/common/forms/form_builder.js 16 kB {0} [built]
[163] ./~/angular2/src/common/common_directives.js 4.11 kB {0} [built]
[164] ./~/angular2/src/platform/dom/dom_adapter.js 8.88 kB {0} [built]
[165] ./~/angular2/src/platform/dom/events/dom_events.js 6.43 kB {0} [built]
[166] ./~/angular2/src/platform/dom/events/event_manager.js 9.5 kB {0} [built]
[167] ./~/angular2/src/platform/dom/events/key_events.js 16.5 kB {0} [built]
[168] ./~/angular2/src/platform/dom/events/hammer_gestures.js 6.3 kB {0} [built]
[169] ./~/angular2/src/platform/dom/events/hammer_common.js 4.95 kB {0} [built]
[170] ./~/angular2/src/platform/dom/dom_tokens.js 1.57 kB {0} [built]
[171] ./~/angular2/src/platform/dom/dom_renderer.js 58.5 kB {0} [built]
[172] ./~/angular2/src/animate/animation_builder.js 3.19 kB {0} [built]
[173] ./~/angular2/src/animate/css_animation_builder.js 9.02 kB {0} [built]
[174] ./~/angular2/src/animate/css_animation_options.js 1.97 kB {0} [built]
[175] ./~/angular2/src/animate/animation.js 26.9 kB {0} [built]
[176] ./~/angular2/src/facade/math.js 645 bytes {0} [built]
[177] ./~/angular2/src/platform/dom/util.js 2.38 kB {0} [built]
[178] ./~/angular2/src/animate/browser_details.js 8.91 kB {0} [built]
[179] ./~/angular2/src/platform/dom/shared_styles_host.js 9.57 kB {0} [built]
[180] ./~/angular2/src/core/render/view_factory.js 49.8 kB {0} [built]
[181] ./~/angular2/src/core/render/view.js 10.6 kB {0} [built]
[182] ./~/angular2/src/platform/browser/browser_adapter.js 67.9 kB {0} [built]
[183] ./~/angular2/src/platform/browser/generic_browser_adapter.js 11.1 kB {0} [built]
[184] ./~/angular2/src/platform/browser/xhr_impl.js 6.03 kB {0} [built]
[185] ./~/angular2/src/compiler/xhr.js 1.21 kB {0} [built]
[186] ./~/angular2/src/platform/browser/testability.js 9.68 kB {0} [built]
[187] ./~/angular2/src/core/profile/wtf_init.js 598 bytes {0} [built]
[188] ./~/angular2/src/platform/browser/title.js 2.76 kB {0} [built]
[189] ./~/angular2/platform/common_dom.js 3.19 kB {0} [built]
[190] ./~/angular2/src/platform/dom/debug/by.js 4.24 kB {0} [built]
[191] ./~/angular2/src/platform/dom/debug/debug_element_view_listener.js 12.6 kB {0} [built]
[192] ./~/angular2/src/platform/browser/tools/tools.js 2.58 kB {0} [built]
[193] ./~/angular2/src/platform/browser/tools/common_tools.js 9.32 kB {0} [built]
[194] ./~/angular2/src/facade/browser.js 2.67 kB {0} [built]
[195] ./~/angular2/compiler.js 982 bytes {0} [built]
[196] ./~/angular2/src/compiler/url_resolver.js 36.7 kB {0} [built]
[197] ./~/angular2/src/compiler/compiler.js 9.75 kB {0} [built]
[198] ./~/angular2/src/compiler/runtime_compiler.js 5.7 kB {0} [built]
[199] ./~/angular2/src/compiler/template_compiler.js 48.4 kB {0} [built]
[200] ./~/angular2/src/compiler/directive_metadata.js 36.5 kB {0} [built]
[201] ./~/angular2/src/compiler/selector.js 55.9 kB {0} [built]
[202] ./~/angular2/src/compiler/util.js 11.3 kB {0} [built]
[203] ./~/angular2/src/compiler/source_module.js 7.48 kB {0} [built]
[204] ./~/angular2/src/compiler/change_detector_compiler.js 15.5 kB {0} [built]
[205] ./~/angular2/src/compiler/change_definition_factory.js 33.5 kB {0} [built]
[206] ./~/angular2/src/compiler/template_ast.js 28.4 kB {0} [built]
[207] ./~/angular2/src/transform/template_compiler/change_detector_codegen.js 2.24 kB {0} [built]
[208] ./~/angular2/src/compiler/style_compiler.js 18.5 kB {0} [built]
[209] ./~/angular2/src/compiler/shadow_css.js 64 kB {0} [built]
[210] ./~/angular2/src/compiler/style_url_resolver.js 6.42 kB {0} [built]
[211] ./~/angular2/src/compiler/command_compiler.js 63.2 kB {0} [built]
[212] ./~/angular2/src/compiler/template_parser.js 121 kB {0} [built]
[213] ./~/angular2/src/compiler/html_parser.js 39 kB {0} [built]
[214] ./~/angular2/src/compiler/html_ast.js 6.08 kB {0} [built]
[215] ./~/angular2/src/compiler/html_lexer.js 77.5 kB {0} [built]
[216] ./~/angular2/src/compiler/parse_util.js 8.45 kB {0} [built]
[217] ./~/angular2/src/compiler/html_tags.js 45.3 kB {0} [built]
[218] ./~/angular2/src/compiler/schema/element_schema_registry.js 1.45 kB {0} [built]
[219] ./~/angular2/src/compiler/template_preparser.js 9.77 kB {0} [built]
[220] ./~/angular2/src/compiler/template_normalizer.js 20.6 kB {0} [built]
[221] ./~/angular2/src/compiler/runtime_metadata.js 19.5 kB {0} [built]
[222] ./~/angular2/src/compiler/schema/dom_element_schema_registry.js 8.43 kB {0} [built]
[223] ./src/testing/components/testing.ts 1.27 kB {0} [built]
【问题讨论】：
-
为什么不在视图中包含 angular2 作为脚本标签？换句话说，为什么你希望 angular2 出现在最终包中？
-
为简单起见，所以我不必手动执行任何手册，包括我需要的各种供应商模块（我可能还需要其他非角度的东西）。
-
如果你只单独包含 angular，你可能会从你的最终包中减少很多字节。您的供应商脚本可以是捆绑包的一部分。
-
但实际上现在最重要的是：我正在努力学习和理解 webpack（也），很高兴知道它为什么会产生如此大的文件。 webpack 是否也会让我未来的大型应用程序比它需要的大 3 倍（即使我单独包含供应商模块并且我仅将 webpack 用于应用程序本身）？
-
这就是 ES6 模块的使用方式。
import foo from 'foo'让你可以访问 foo，但捆绑器也会引入依赖项。