问题标签 [webpack-production]

所以问题是webpack-dev-server一切都按预期工作。

但是，当我手动打开index.html after时npm run build，我只看到正在渲染的标题组件，其余的将在获取数据后渲染，是空白的。控制台没有错误。

未渲​​染的组件是Routes。好吧，我是Route第一次使用 s ，经过大量搜索后，我了解到我应该在webpack.config.jshistoryApiFallback中使用andpublicPath。

但结果是一样的。我不知道它在开发和生产方面有何不同。我还想稍微解释一下您可能提供的修复程序！

请告诉我原因和解决方法！

链接到项目 - https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js:138-154

应用程序在开发模式下工作正常。但是，Index.html 在构建之后是空的并且不显示任何内容。

这是我的 App.jsx

Webpack.common.js

Webpack.dev.js

webpack.prod.js

这是我构建后的 index.html

这是我的 package.json

我究竟做错了什么 ？是依赖问题吗？当我尝试构建时，Webpack 会发出此警告

** [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets 已弃用（使用 Compilation.hook.processAssets 并使用 Compilation.PROCESS_ASSETS_STAGE_* 之一作为阶段选项）（node --trace-deprecation ...用于显示警告的创建位置）（节点：160318）[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning： Compilation.assets 将来会被冻结，所有修改都已弃用。

**

谢谢！

404 errors在访问静态文件（样式表、实用程序等）时，我的 React 应用程序会投入生产。开发环境运行良好。经过几天的调试和进一步的研究，我认为这是一个 webpack 路径问题，因为我对构建路径的理解，尽管我对webpack.js.orgwebpack.output进行了研究，但仍然缺乏。参考其他帖子后，我仍然无法掌握捆绑应用程序的最终概念。感谢所有帮助。请参阅下面的“尝试过的东西”、“引用的帖子”和“我的过程的注释”。谢谢你。

尝试的事情：

1. 在 package.json 中添加了指向“https://my_ghub_username.github.io/project_repo/”的“主页”属性

2. "homepage"将属性更改为"."

3. 更改 React 路由器以<HashRouter/>确保其正确导入。

4. 在再次将我的应用程序部署到 GH 页面之前，将我的最新更改推送到 main

5. 向, , &&添加package.json了脚本pre-deploydeploybuild

引用的帖子/指南

1. 如何将 React 应用程序部署到 GitHub Pages
2. https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom
3. 无法将 webpack 部署到 gh-pages（反应应用程序）

我在 chrome 工具中附上了相关代码package.json( I )、webpack.dev/prod/common.js( II )、index.html( III )、文件树( IV ) 和错误( V ) 的片段。

（一）

( IIA )

（二）

( IIC )

（三）

（四）

文件树

(五)

笔记

在过去的几天里，我尝试了一些替代解决方案，比如利用 404 页面重定向到我的应用程序，同时仍将Browser router其用作潜在的解决方案，但不理解 webpack 的最后一个方面让我很生气，因为我知道我可以将 webpack 用于我的优势。（我真的想更好地概念化 webpack 路径以改进现有应用程序）。

最后，非常欢迎任何关于代码质量、约定和实现的反馈。

有人可以帮我弄这个吗？我有一个反应应用程序的生产版本。此生产版本中的所有组件在 localhost 中运行良好。我已经在cpanel中托管了它。但在实时服务器中，特定路由（用户/注册组件）未加载并引发图像中给出的以下错误。所有其他组件在实时服务器中工作正常。例如，用户/登录工作正常，但用户/注册没有加载（但在本地加载）。我尝试了https://dev.to/goenning/how-to-retry-when-react-lazy-fails-mb5中给出的辅助函数，但没有帮助。 控制台中显示的错误

--App.js--

--加载.js--

--Users.js--

--User.js---

我收到了这个错误：

错误：缩小的 React 错误 #130；访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。我怎样才能解决这个问题？

这是我的 webpack 配置的相关部分：

尽管如此minify: false，如果mode: 'production'. 如果mode: 'development'，那么它是多行。如果我更改hash: true，那么它会变成一行，其中包含用于缓存清除的查询字符串哈希，这证明它读取了此配置对象。

但为什么它会截断换行符？我试图指定一个对象和集合collapseWhitespace以及其他道具而不是minify: false，但它也没有效果，仍然使它成为一行。以下是 package.json 的版本列表：

编辑：为了澄清，我指的是 webpack 插入的动态包含之间的换行符的截断，这是对捆绑的 JS 和 CSS 文件的引用。无论是生产版本还是开发版本，所有这些文件都恰好出现在一行中。似乎没有办法将它们逐行拆分，就好像它们是人类小心插入的一样。

为什么将每个动态包含在自己的行中很有用？例如，如果您想检查订单。目前唯一的选择是向左/向右滚动并尝试记住屏幕外出现的内容，这比从上到下阅读列表更具认知负荷，所有内容都适合一个屏幕而不滚动。

我的项目中有很多.js文件要导入到 Vue 组件中。其中一些 JavaScript 文件旨在用于开发模式，它们不会包含在生产中，但我不允许在项目中删除这些文件。例如;

有两个 JavaScript 文件称为authDev.js和authProd.js。它们的用法基本相同，但内容不同。在这些 JavaScript 文件中有函数，我将它们导出以便能够导入到几个 Vue 组件中。

第一个问题，如果我动态导出或导入它们，webpack 会在我运行时包含这些文件npm run build吗？换句话说，假设我创建了一个 JavaScript 文件但我没有导出它，所以我也没有将它导入到任何地方。webpack 是否理解此 JavaScript 文件未在这些 Vue 项目的任何地方使用并在将我的项目构建到生产环境时将其丢弃？或者它是否包括项目中存在的每个文件？

第二个问题，有没有办法告诉 webpack 那些 JavaScript 文件不会被包含在 dist 文件夹中……我的意思是，我可以指定用于开发和生产的文件吗？

首先，我认为我可以根据条件导入或导出它们，但是当我尝试将我的导入导入时if statements，它给了我一个错误并说"imports must be at the top level"。所以我尝试动态导出它们，但也做不到。

然后我尝试删除文件中的特定代码块。有一些包和插件可以从 Vue 项目中删除每个控制台输出，但我找不到任何东西可以删除或丢弃特定的代码行。

最后，我决定采取一种方法来包含和排除特定文件。有没有办法做到这一点？如果是，我该怎么做？提前致谢。

解决方案（已编辑）

为了快速测试，我创建了两个.js名为auth-development.js和auth-production.jsin src/assets/js/filename.jslocation 的文件。以下是它们的内容；

然后我修改了vue.config.js文件中的 webpack 配置；

Vue 给出了"path is undefined"错误，我添加了代码的顶部来处理该错误。我曾经process.env.NODE_ENV获取单词development并production添加我的 javascript 文件的末尾，以便我可以定义它们的路径。

然后我将其动态导入到一个名为如下conditionalAuth的测试组件中；"HelloWorld"

我像这样使用它们；

以这种方式，当我npm run serve导入auth-development.js但如果我npm run build尝试index.html在dist实时服务器上的文件夹中，它只导入auth-production.js.

最后，当我检查最终构建时，auth-development.js不是为我的项目的 dist 版本构建的。它只导入块中的生产 javascript 文件。

我已经发布了生成反应应用程序的生产版本并出现此错误。

我查看了这个页面：https ://create-react-app.dev/docs/troubleshooting/#npm-run-build-fails-to-minify

我想我需要升级反应脚本。我查看了 package.json 并没有发现 react-script

这是我的 package.json 文件：

我知道它也使用 react-script 但由于某种原因它是从 react-script 中提取的。

有谁知道一种方法来处理这个为生产构建而发布的缩小版？

当我使用 构建我的项目时ng build --configuration production，我的 /dist 文件夹中有 3000 多个文件。其中大约 300 个将当前时间作为“修改日期”：

有趣的是，还有很多其他文件甚至没有 4 kb：

此外，这些文件有一个较旧的“最后修改”日期，我也不明白。我不知道这是否有帮助，但这些文件的内容如下所示：

拥有这么多文件有两个很大的缺点： -FTP 上传（部署应用程序）需要很长时间 -ngsw-service worker 有时（也不知道那里发生了什么）将所有这些文件下载到客户端，这也只会产生不必要的高请求的数量。

我知道如果文件减半（es5/es2015），我可以减少数量，但这仍然给我留下太多文件。我的朋友也在做一个巨大的项目，但他们总共只有 300 个左右的文件。

我已将我的应用程序从 angular 8 升级到 angular 12，显示了 webpack:\ 文件夹，因此我可以在 devtools 中搜索源映射，但是当我升级到 angular 12 时，它从未显示，我尝试了很多方法来实现它，但什么也没有，我也禁用了production: false，environment.ts但不起作用。也试过sourceMap: true，angular.json但没有奏效。我现在很绝望。

不显示 webpack:\\ 文件夹的 dev-tools 图像