webpack 2，angular 2 - 使用“require”和使用变量构建的路径答案

【问题标题】：webpack 2, angular 2 - using "require" with path built using variablewebpack 2，angular 2 - 使用“require”和使用变量构建的路径
【发布时间】：2017-11-19 00:08:51
【问题描述】：

我的问题是：每当我在 angular ->

中使用以下语法时

let myCmp = 'test1';

let cmp = require('./components/'+myCmp+'/bootstrapCmp.component.ts');

我将在最终包中的 components 文件夹中获取所有组件，而不仅仅是“test1”；

（我正在使用 AngularClass 团队的 Angular 2 WebPack 入门包 - https://github.com/AngularClass/angular-starter

有人也有这个问题吗？

我正在加载的组件/所有其他组件都是基本的 angular 2 组件。

在此先感谢，我正在为此苦苦挣扎^^

【问题讨论】：

考虑一般情况。 bundler 如何提前知道哪些组件在不运行代码的情况下包含在 bundle 中？
你也可以阅读这个discussion。
@YuryTarabanko 感谢您的快速回复！当你这样说时，我能想到的唯一答案是使用 webpack 配置文件。有没有办法要求 webpack 的配置文件中的相关文件并在 angular 的应用程序中访问它们？以及为什么bunlder在require的路径中使用它时无法读取变量的值？

标签： javascript angular webpack require webpack-2

【解决方案1】：

希望我为自己找到的解决方案能帮助其他开发人员：

在 webpack.common.js 文件中，我将新文件添加到我的条目对象中，我称之为：boot.js。

所以结构是这样的：

entry: {
  main:['./src/polyfills.browser.ts','./src/assets/boot.ts','./src/main.browser.ts']
}

boot.ts 文件包含一个对象，其中包含我将使用的所有相关组件（引用）。

当bunlder (wepback) 运行时，每当我需要一些组件时，我都会访问我在boot.ts 文件中创建的这个对象，最终的bundle 文件现在只包含我想要的组件。

【讨论】：