【问题标题】：Build standalone module alongside main module with Webpack使用 Webpack 在主模块旁边构建独立模块
【发布时间】：2017-10-03 10:49:16
【问题描述】：

我有一个基于 AngularClass starter 项目的 Webpack 2 构建的 Angular 2 应用程序。从这个问题你可能会知道，我仍然是一个 Webpack n00b。

作为我正在实施的一项新功能的一部分，我想开发一个独立的小部件，该小部件可以下载到客户端。它在逻辑上是我的主应用程序的一部分，但不使用 Angular，因此不应直接依赖于浏览器中加载的主 Angular 应用程序。但是，它确实共享了一些代码和设置——比如 SASS、端点 URL、lint 规则和一些 TypeScript 类。

为了保持干燥，我希望使用相同的 Webpack 配置来构建应用程序和小部件。为了开始，我告诉 Webpack 将我的小部件构建为一个单独的模块：

entry: {    
    'polyfills': './src/polyfills.browser.ts',
    'main': AOT ? './src/main.browser.aot.ts' :
        './src/main.browser.ts',
    'widget': './src/app/widget/index.ts'      // <-- added this
}

我现在有三个问题。

使 widget.bundle.js 独立

因为 Webpack 已将共享依赖项捆绑在一起，所以我仍然需要加载我所有的 Angular 应用程序模块才能让我的小部件工作：

<script src="http://localhost:8080/polyfills.dll.js"></script>
<script src="http://localhost:8080/vendor.dll.js"></script>
<script src="http://localhost:8080/polyfills.bundle.js"></script>
<script src="http://localhost:8080/vendor.bundle.js"></script>
<script src="http://localhost:8080/main.bundle.js"></script>
<script src="http://localhost:8080/widget.bundle.js"></script>

我希望我的小部件完全独立，所以我可以加载：

<script src="http://localhost:8080/widget.bundle.js"></script>

防止 widget.bundle.js 在主应用中加载

现在，当我运行我的主应用程序时，它也会尝试加载 widget.bundle.js。我想防止这种情况发生。

Webpack 将块 ID 附加到包名称

对于生产版本，Webpack 会创建我的小部件包，其名称类似于 widget.234e2174f24f78d1072c.bundle.js。这不好，因为每次构建都会改变，所以我所有的客户都必须用新名称更新。如何使此名称成为静态名称？

【问题讨论】：

标签： javascript angular typescript webpack webpack-2

【解决方案1】：

我想得越多，就越明显我需要一个完全独立的webpack.config.js 用于这个小部件。基于我现有的配置之一，这并不难做到。我最终得到了一个带有单个条目和输出的简单配置，删除了所有不需要的插件，尤其是 CommonChunkPlugin，它根据共享依赖项拆分模块。

    entry: {
        'selector-widget': './src/app/widget/index.ts'
    },

    output: {
        path: helpers.root('dist'),
        filename: 'widget.bundle.js'
    }

然后我在package.json 中创建了一个新脚本来构建小部件，然后从主生产构建脚本中调用它。

【讨论】：