问题描述：

我有一个由Webpack 2构建的基于AngularClass starter项目的Angular 2应用程序。正如你可能从这个问题中得出的结论，我仍然是一个Webpack n00b。与Webpack主模块一起构建独立模块

作为我正在实施的新功能的一部分，我想开发一个独立的小部件，并将其下载到客户端。它在逻辑上是我的主要应用程序的一部分，但不使用Angular，因此不应直接依赖于正在浏览器中加载的主要Angular应用程序。然而，它确实共享一些代码和设置 - 像SASS，端点URL，lint规则和一些TypeScript类的东西。

为了保持干爽，我希望使用相同的Webpack配置来构建App和Widget。为了让事情开始，我告诉的WebPack建立我的widget作为一个独立的模块：

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共享捆绑在一起的依赖关系，我还是要加载所有的我的角度应用模块，让我的小部件的工作：

<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的名称。这并不好，因为每个版本都会改变，所以我的所有客户都必须使用新名称进行更新。我如何使这个名字是静态的？

答

我想到的越多，就越明显，我需要一个完全独立的webpack.config.js这个小部件。根据我现有的配置之一，这并不难。最后，我用一个简单的配置输入和输出，删除了所有不需要的插件，特别是CommonChunkPlugin，它根据共享依赖关系分割模块。

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

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

我再package.json创建一个新的脚本打造的小部件，然后叫这从主要生产构建脚本。

与Webpack主模块一起构建独立模块

制作widget.bundle.js独立

防止widget.bundle.js被加载在主应用程序

的WebPack追加大块ID的包名称

相关推荐