angular-webpack-workflow 演示项目中的 Webpack 导入 Angular答案

【问题标题】：Webpack import angular in angular-webpack-workflow demo projectangular-webpack-workflow 演示项目中的 Webpack 导入 Angular
【发布时间】：2016-01-03 18:06:37
【问题描述】：

我正在检查这个 Webpack 演示项目 https://github.com/Foxandxss/GermanWords-ng1-webpack。该项目在这行的几个文件中包含 (features/home/index, features/login/index)：

import angular from 'angular';

我不明白 - 如果 'angular' 库会因为该库存在于多个源文件中而多次包含在结果 js 文件中？我查看了 webpack 配置文件，但无法理解。请问，你能解决这个问题吗？

【问题讨论】：

Webpack 将从你所有的源文件构建一个完成的文件，只提取作为导入存在的所需组件。文件中的所有依赖项都需要在使用的地方导入。这非常简洁，因为所有依赖项都在使用的地方导入，从而更容易将代码拆分为多个文件，而不会弄乱属于哪里。
所以加起来，无论导入多少个文件，angular在webpack构建的最终文件中只会存在一次

标签： javascript angularjs webpack

【解决方案1】：

只是为了确保每个模块都可以使用 angular。想象一下，您使用一个功能成为一个新的独立站点，您将已经准备好代码。始终认为每个功能都是独立的（处理路由、依赖项、控制器、视图等）。

Webpack 将处理依赖项并且只注入一次 Angular，不用担心。就像@thsorens 在 cmets 中所说的那样：“文件中的所有依赖项都需要在使用它的地方导入。”

另外，我发现这个基于 Foxandxss 工作的 yeoman 生成器：https://github.com/Aleksion/generator-angular-webpack-babel

玩得开心。

【讨论】：