使用Webpack

Question

我有一个基于AngularClass starter项目由Webpack 2构建的Angular 2应用程序。正如您可能从这个问题中得知的那样，我仍然是Webpack n00b。

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

为了保持干爽，我希望使用相同的Webpack配置构建App和Widget。为了开始，我告诉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创建我的窗口小部件包。这并不好，因为这会在每次构建时发生变化，因此我的所有客户都必须使用新名称进行更新。如何将此名称设为静态？

Answer 1

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

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

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

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