问题标签 [webpack-2]

我正在开发一个具有多条路线的单页应用程序，这些路线中的一小部分将小部件绘制到屏幕上。每个路由都有一个延迟加载的 React 组件，负责绘制内容。

我正在使用的小部件 npm 包非常大，所以我不想将它捆绑在主应用程序中，但我也不想将它包含在每个需要它的路由的动态包中。

为此，在 Webpack 1.x 中，我能够为我的路由执行以下操作：

这会很好地生成 3 个 webpack 包文件：

• nameOfWidgetPackageBundle.js
• nameOfRouteBundleA.js
• nameOfRouteBundleB.js

然后当我在应用程序中点击 /route/A 时，它会依次加载两个 js 文件：nameOfWidgetPackageBundle.js 和 nameOfRouteBundleA.js

然后，如果我随后导航到 /routeB，它会依次加载两个 js 文件：nameOfWidgetPackageBundle.js，然后是 nameOfRouteBundleA.js，但至关重要的是，nameOfWidgetPackageBundle.js 将从浏览器缓存中获取...

更改为 Webpack 2.x 语法后，我的路由有以下内容：

这会生成几个块文件（令人讨厌的是，Webpack 2 中的 System.import 不再允许您命名块文件，但出于示例的目的，我将使用与 Webpack 1 中的 require.ensure 相同的包命名样式）：

• nameOfWidgetPackageBundleA.js
• nameOfWidgetPackageBundleB.js
• nameOfRouteBundleA.js
• nameOfRouteBundleB.js

所以基本上为小部件包创建了重复的包。这两个文件具有相同的文件大小和几乎相同的内容，但是在不同的路径之间导航现在需要在每次使用时重新下载小部件包。

我的问题是，有没有人知道强制 Webpack 2 System.import 表现得更像 Webpack 1 的 require.ensure 并且不生成重复包的方法？

编辑 - 我尝试使用以下 webpack 插件来解决问题：

new CommonsChunkPlugin({ name: 'widget-package', async: true, children: true, minChunks: 1}) （添加了 widget-package 作为条目）

新的 DedupePlugin()

新的 webpack.optimize.AggressiveMergingPlugin({ minSizeReduce: 1.5, moveToParents: false, entryChunkMultiplicator: 10 })

其中唯一有效的是 AggressiveMergingPlugin。它解决了重复的小部件包包问题，但也合并了我所有的动态包，这违背了整个目的，因为现在只有一个动态包......

我有一个奇怪的问题，我似乎无法解决。

我收到此错误：

我的 webpack 文件如下所示：

该文件肯定存在于该文件夹中。它在 webpack 上运行良好。不过，它似乎不适用于 webpack2。

我一直在玩 Webpack 2，并将我的 TypeScript 切换到 ES6 模式以利用 tree-shaking。这很酷，但问题是我现在在生产中使用 ES6，而并非所有浏览器都支持它。

如何在 tree-shaking 完成后告诉 Webpack 发出 ES5 ？

如何启用angular/universal-starter 的缩小？

现在浏览器加载一个 3.4MB 的index.js文件：

enableProdMode负责缩小？

如果是，universal-starter 现在确实enableProdMode在server.ts和client.ts中。

如果没有，如何启用缩小？谢谢

我遇到了这个问题，在我推送存储库之前，该项目很好，现在当我从另一个目录或其他机器中的存储库克隆时，在我的机器上运行的项目无法运行。

npm cache clean我已尝试使用甚至完全删除 node_modules 并重新安装依赖项来解决此问题，但没有运气

运行于：
Webpack 版本：2.1.0-beta.25
环境：OS X 10.11.6
Node v6.2.0，npm 3.8.9

npm 调试文件：

有没有办法在 webpack 中延迟加载 DLL？

我一直在看下面的例子：https ://gist.github.com/robertknight/058a194f45e77ff95fcd

该示例将捆绑包分离为DLL，但通过 script 标签包含它。

有没有办法告诉 Webpack 有条件地包含DLL来自另一个包的内容？

这个想法是将其用作延迟加载技术，其中仅在某些用户特定的运行时条件为真时才加载包。

对于上下文，我在 Angular 2 中这样做

我有一个使用 webpack 压缩/编译的 angular2 项目。

我将 tslink 加载器与 webpack 一起使用，因此我在webpack.config.js.

我将 webpack 1.13.1 更新为 2.1.0-beta.25 并且 tslint 配置打破了npm run build.

我将preLoaders指令更改为loaders

这还不够，因为我仍然收到错误

所以我应该移动 tslint 配置并将其放在其他地方。有点迷失在这里。因此，我们将不胜感激有关该问题的任何信息。

谢谢！

webpack 2 中的新增功能对导出名称有这样的说法：

ES6 导出修改

在可以跟踪导出使用情况的情况下，webpack 可以将导出名称修改为单个字符属性。

我正在尝试使用 webpack，并从http://webpack.github.io/docs/usage.html上的非常简单的“猫”示例开始

我已将 js 文件转换为 ts 并尝试启用 sourceMaps。仍然当我在 app.ts 中设置断点时

然后 Chrome 停在正确的位置，但我无法在控制台中评估“猫”（未捕获的参考错误：未定义猫）。如果我查看生成的 JS，那么我发现我必须使用“ra”来打印猫。

那么：我是否正确认为原因是这种“出口混乱”？

可以关闭吗？

我正在使用 Webpack 2。我为这个项目编写了一个自定义加载器并将其放入./webpack-tools/loaders/my-custom-loader.js. 加载程序如下所示：

我试图配置我webpack.config.json使用这个自定义加载器：

当我尝试构建我的项目时，我收到以下错误（已清理以删除有关我的项目的识别信息）：

（我必须承认，我发现此错误消息非常无用。消息“SyntaxError: Unexpected token ILLEGAL”并没有给我任何线索，而且我的自定义加载程序没有出现在完整跟踪中的任何位置。）

我尝试了几种不同的方法来引用我的自定义加载器webpack.config.js，包括：

和：

但是无论我使用哪种配置，我都会遇到相同的错误。

如何在我的 Webpack 2 项目中正确包含我的自定义加载器？

我正在尝试将带有 webpack2 项目的 angular2 转换为基于 angular-cli 的项目。

如果我理解正确的话，angular-cli 现在支持 webpack。在我原来的项目中，我注入了以下内容app.config.js：

通过将以下内容添加到webpack.config.js 文件中：

然后在我的打字稿项目中，我会声明 APP_CONFIG ，declare var APP_CONFIG:any;然后我会使用它的属性。如何在 angular-cli 项目中注入这样的对象？

谢谢