问题标签 [webpack-4]

这是我的配置文件，它在所需的“dist”目录中捆绑和生成构建文件。但我想将其复制到其他位置。问题是 copyWebPackPlugin 在构建完成之前运行得更早一些。

运行 webpack --mode development 后，我​​没有在所需位置获得任何文件。

我正在使用 webpack 来捆绑我的 Angular 应用程序。

捆绑的文件之一包括应用程序所需的所有模型，这些模型是使用构造函数定义的。

Webpack 通过它的 UglifyJS 插件破坏了我的构造函数名称，这导致了不同的复杂性。

我想防止 webpack 仅在此特定资产上修改函数名称。

有什么办法可以做到这一点？

我有一个 99% 的通用样板。问题是当我在代码更改后热重新加载页面显示正确的输出时，但如果我刷新页面，我会收到这样的错误。

服务器不会更新，但客户端会更新，即使在刷新时也是如此。

我不知道怎么了，我用谷歌搜索了很多:)

这是创建块的代码。

这是服务器实现

这是客户端入口点。

如果有人知道如何解决这个问题，或者有任何想法，我将非常感激:)

我在配置 webpack4 以正确捆绑共享依赖项时遇到困难。

我的应用程序中有两个页面（Page1 和 Page2）。两者都需要bootstrap，jquery以及一个名为core.

Page 2 需要相同但还需要一个名为my-appand的自定义 JavaScript 应用程序lodash。

由于我的core应用程序将包含在所有页面中，因此我希望拥有jquery和bootstrap在同一个包中。

由于lodash只需要运行页面my-app，我想在my-app包中包含该依赖项。

所以我像这样设置我的应用程序：

webpack.config.js

page1.html

page2.html

（完整项目：https ://github.com/LondonAppDev/webpack-split-example ）

当我运行时npx webpack，它会创建core.bundle.js，my-app.bundle.js但是这两个都包括jquery.

是否可以将所有“全局”依赖项放入core.bundle.js？

我在删除 webpack 4 中未使用的 CSS 时遇到问题。似乎大多数 CSS 净化插件都依赖于未针对版本 4 更新的提取文本插件。

这是我的命令：

node_modules/.bin/webpack --mode=development --env.operation=separateCSS

或者

node_modules/.bin/webpack --mode=development --env.operation=bundleCSS

这是我的 webpack.config.js 的一部分：

有谁知道如何修改我的配置文件以便 webpack 可以删除未使用的 CSS？

假设我有类 bar.js

现在在索引中我想延迟加载点击 index.js

并且编译工作正常，但 index.js 是 webpack 配置的空白部分

.babelrc

如何启用 promise 和 import() 策略？

我正在处理一个包含大量代码的旧项目。这个项目使用 Webpack 3.8.1，我正在尝试更新到 4.4.1，这是一个真正的障碍课程！

主要的痛苦是项目使用 CommonsChunkPlugin：

我知道 Webpack 4 不再提供 CommonsChunkPlugin。非常感谢以下文章，他们节省了数小时的研究时间：

• https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
• https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

感谢这些惊人的链接，我用这些行替换了 CommonsChunkPlugin：

由于此配置，应用程序正在正确构建，创建块并且应用程序按预期运行。但是构建时间真的很慢：7分钟多！

有趣的是，如果我完全删除整个optimization.splitChunks配置，应用程序仍然可以正常运行，并且构建时间仍然在 7 分钟左右：这完全就像我所做的那样optimization.splitChunks毫无用处。

我试图改变chunks属性：老实说，我并不真正理解它的作用......
如果我将它们设置为all，构建会更快：大约 1 分钟。

但不幸的是，从我的入口点生成的文件运行不佳：Webpack 似乎在执行我自己的代码之前等待加载块：

请告诉我我在这里没有错：Webpack 似乎在等待延迟模块被加载，但它并没有运行实际加载它们的代码......我想如何让它工作？

简单来说：

• 设置chunks为async：一切运行良好，但构建时间不可行（超过 7 分钟）
• 设置chunks为all：构建时间正确（大约 1 分钟），但我的代码没有运行¯\_(ツ)_/¯

很抱歉这篇长篇文章，但如果有人可以帮助我在正确的构建时间下完成所有这些工作，那将是完美的。

或者至少帮助我了解所有这些应该如何工作，官方文档不是很有帮助:(

提前致谢！

编辑：尽管有 700 万的构建时间，我仍尝试继续chunks设置为。 我有 20 个入口点，如果我在其中一个中添加导入 jQuery 和 jQuery-UI 的指令，构建时间会加倍。 如果我将它添加到 5 个文件中，构建会崩溃：async
import

<--- 最近几次 GC --->

[15623:0x103000000] 222145 ms: 标记扫描 1405.0 (1717.4) -> 1405.2 (1717.4) MB, 671.3 / 0.0 ms 分配失败 GC 在旧空间请求 [15623:0x103000000] 222807 毫秒 (1717.4) -405.2。 > 1405.0 (1667.9) MB, 662.4 / 0.0 ms 最后手段 GC 在旧空间请求 [15623:0x103000000] 223475 ms: 标记扫描 1405.0 (1667.9) -> 1405.1 (1645.4) MB, 667.1 / 0.0 ms 最后手段 GC 在旧要求的空间

<--- JS 堆栈跟踪 --->

==== JS 堆栈跟踪 ==========================================

安全上下文：0x1b6415c25ee1 1：fromString(aka fromString) [buffer.js:~298] [pc=0x1973a88756aa](this=0x1b6462b82311 ,string=0x1b642d3fe779 ,encoding=0x1b6462b82311 ) 3: from [buffer.js:177] [bytecode= 0x1b6488c3b7c1 offset=11](this=0x1b644b936599,value=0x1b642d3fe779,encodingOrOffset=0x1b6462b82311

>> 致命错误：CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足

内存不足...我认为设置chunks为async不是解决此问题的正确方法：/

我正在使用 splitChunks 来优化我的应用程序，但是在一个块更新之后，浏览器会拉下所有资产，因为 clean-webpack-plugin 删除了整个 dist 文件夹，从而更改了请求的 If-Modified-Since。有没有办法只清理更改块的先前版本？

谢谢。

我正在尝试设置反应路由，当我单击网站上的某些内容时该路由有效，但是如果我打开一个新选项卡并复制该 URL。我明白了

webpack.config

index.js

商店

我也试过historyApiFallback: true

我第一次尝试运行webpack-4

它显示警告/错误：

然后我试图改变模式

表明 ：