使用Webpack同时构建独立模块和主模块

Question

我有一个Angular 2应用程序，由Webpack 2构建，基于 AngularClass starter项目。正如你从这个问题中可以看出的那样，我仍然是一个Webpack新手。 作为我正在实施的新功能的一部分，我想开发一个独立的小部件，该小部件将下载到客户端。它在逻辑上属于我的主要应用程序，但不使用Angular，因此不应直接依赖于在浏览器中加载的主要Angular应用程序。但是，它确实共享一些代码和设置-例如SASS、终端点URL、lint规则和一些TypeScript类。 为了保持DRY，我希望使用相同的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的名称创建我的小部件包。这不好，因为每次构建都会更改此名称，因此所有客户端都必须更新新名称。如何使此名称静态？

- Mike Chamberlain

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 中创建了一个新的脚本来构建小部件，然后从主生产构建脚本中调用它。

- Mike Chamberlain