问题标签 [webpack-4]

我需要帮助将以下代码从 webpack 3 迁移到 4。

我有两个入口文件，并且只希望第一个的依赖项包含在供应商块中。第二个条目的依赖项都应该保留在它自己的包中。

我有自己的 json-loader，我想用它来代替内置的加载器。这曾经在 webpack-3 中工作；在 webpack-4 中，我的加载器被调用，但结果被传递给内置加载器，然后它会出错，因为它被输入的是 JS 源代码，而不是 json。如何防止调用内置的 json-loader？我的 webpack.cofig.ts 看起来像这样：

Webpack 4 附带以下声明：

错误：webpack.optimize.UglifyJsPlugin已被删除，请config.optimization.minimize改用。

很公平，但我找不到任何有关配置在后台运行的 UglifyJsPlugin 实例的信息，例如更改缓存目录。这可以做到吗？

所以我最近ng update在我的 angular5 项目上运行了一个并将 angular cli 更新到版本 1.7.2 和 webpack 到 4.1.0。我可以使用没有错误地构建良好，ng build但是当我运行时ng build --prod出现以下错误：

不知道从这里做什么，有什么帮助吗？我可以发布我的webpack.config.js，packages.json如果有帮助的话。

我正在尝试模仿Webpack 4中react-universal-component的效果。

TL;DR - 我想要一种在 SSR HTML 渲染中转储<link>和标记的方法，其中包含客户端在任何给定路由上请求的所有CSS/JS 块，而服务器则同步加载。<script>

使用react-loadable，一个典型的异步 React 组件在服务器和客户端包中都是这样的：

在服务器上，我<Loadable.Capture>用来获取用于渲染路由的模块名称：

哪个工作正常 -modules路线/logo包含：

['./logo/logo']

我现在需要做的是以某种方式./logo/logo在 Webpack stats 中找到（在我的服务器环境中作为传递给中间件的变量或作为 Webpack 生成的静态 JSON 文件可用）并将其与生成的块相关联调用返回的模块 ID require.resolveWeak()...或（最好）直接在./logo/logo导入名称上。

这就是我卡住的地方。上面提到的“通用组件”NPM 模块中没有一个与 Webpack 4 兼容，并且依赖于以前的 CommonChunksPlugin 的技术已经失效。

是否有任何使用 Webpack 统计信息以根据传递给的字符串查找相关块文件名的示例import()？

根据Webpack 4 文档，如果我指定libraryTarget: 'umd'它应该会产生以下输出：

但是，我得到的是：

更准确地说，
(typeof self !== 'undefined' ? self : this, function()
我得到的不是这个：
(window, function()

这（显然）window is undefined在节点环境中导入时会导致运行时错误。

需要明确的是：
我知道window节点应用程序中不存在。我的问题不是关于这个，而是关于webpack。

这是一个错误还是我错过了什么？

我的输出配置：

我只是在试用 Webpack 4，我想知道它是否有内置的方式来管理 Scss 文件，因为 ExtractTextPlugin 不起作用。

升级到 Webpack 并将相关依赖项升级到 v4 后，我开始收到此错误：[Vue warn]: Failed to mount component: template or render function not defined.

package.json这是我和webpack.config.js之前和之后的相关片段：

升级前：

package.json

webpack.config.js

升级后：

package.json

webpack.config.js

期望什么？

Vue 组件升级后正常工作

实际发生了什么？

大多数 Vue 组件显示错误并无法加载：[Vue warn]: Failed to mount component: template or render function not defined.

I am building an angular app, which contains a single component which depends on a library in my node_modules. I would like to create a single chunk specifically for the dependency so that my users are able to cache it, as the component may change regularly, but the dependency will only be updated every few weeks (whenever it has an update).

I have tried various splits in my webpack config, which always resulted in either all node_modules in a single chunk, or the the component and its dependency together in one chunk.

Is there a way to configure webpack to always split a vendor into its own chunk if it is not loaded initially?

我正在做一个大型项目并尝试登陆 webpack 3 -> 4 更新。这个应用程序有大约 1,000 个入口点，其中大约 10 个被认为是“全局”或“核心”，并保证出现在每个页面上。这些核心包包含供应商和非供应商代码的混合。我需要配置 webpack 来构建所有这些资产，以便出现在任何这些包中的任何块都不会出现在任何其他包中，无论块的大小如何，而无需创建需要添加到页面的新资源。

在 webpack 3 中，我们一直在使用 CommonsChunkPlugin 来实现这一点。这是一个简单的例子：

现在随着 webpack 4 和 CommonsChunkPlugin 的移除，我不清楚如何完成这种优化。

我希望能够为 webpack 提供一个入口点列表，并且出现在其中任何一个中的任何块都不会出现在任何其他包中，但我不知道该怎么做。我已经阅读了一些即将发布的文档，splitChunks但我无法拼凑出一个解决方案。

我已经建立了一个小型仓库作为修补的起点：https ://github.com/lencioni/webpack-splitchunks-playground

我正在尝试的一个有趣的方向是cacheGroups为每个入口点配置一个组，并test使用一个执行此检查的函数来实现该选项。但是，关于此的文档非常稀少，因此我不确定编写此测试函数的正确方法是什么，或者即使这是否可行。