javascript - 使用 Webpack 与主模块一起构建独立模块

Question

我有一个由 Webpack 2 构建的 Angular 2 应用程序，基于 AngularClass starter项目。你可能会从这个问题中看出，我仍然是一个 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 将 block 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 中创建了一个新脚本来构建小部件，然后从主要生产构建脚本中调用它。