Reactjs - /dist 文件夹只有 2 个文件 - bundle.js 和 bundle.js.map - 不包含任何其他文件

Posted 2023-02-22

【中文标题】Reactjs - /dist 文件夹只有 2 个文件 - bundle.js 和 bundle.js.map - 不包含任何其他文件

【英文标题】：Reactjs - /dist folder has only 2 files - bundle.js and bundle.js.map - doesn't include any other files

【发布时间】：2020-10-15 03:14:18

【问题描述】：

我有一个 reactjs 应用程序 - 在开发环境中运行良好。我的意思是，当我使用时

npm start

它在 localhost:8080 中运行没有任何问题。

当我尝试使用以下命令执行相同的命令时，在 AWS S3 中的某处生成一个用于静态托管的分发文件夹。这就是问题所在。

npm run build

下面是我执行上述命令时的输出文件夹结构：

分布

bundle.js bundle.js.map

公开

index.html

我已经浏览了这些帖子（关于我与 bundle.js 文件 sizes 和这个 link 相关的警告）并根据建议进行了修改，但我没有得到想要的结果。

下面是我的 package.json 供参考：

  "name": "react-starter",
  "version": "1.1.5",
  "description": "example",
  "main": "dist/bundle.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./webpack.dev.js",
    "build": "webpack --max_old_space_size=4096 --config ./webpack.prod.js --progress --profile --colors"
  ,
  "homepage": ".",
  "keywords": [
    "react"
  ],
  "devDependencies": 
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^3.2.0",
    "dotenv": "^6.2.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "stylelint": "^9.10.1",
    "stylelint-config-standard": "^18.3.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1",
    "webpack-merge": "^4.1.4"
  ,
  "dependencies": 
    "bootstrap": "^4.3.1",
    "i18next": "^16.0.0",
    "i18next-browser-languagedetector": "^3.0.1",
    "konva": "^2.5.1",
    "normalizr": "^3.4.0",
    "prop-types": "^15.7.2",
    "react-hot-loader": "^4.11.1",
    "react-i18next": "^10.11.1",
    "react-icons": "^3.7.0",
    "react-konva": "^16.8.6",
    "react-player": "^1.11.1",
    "react-scroll": "^1.7.12",
    "reactstrap": "^6.5.0"
  ,
  "peerDependencies": 
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  

webpack.prod.js 如下：

const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, 
    entry: 'apps/index.js',
    mode: 'production',
    devtool: 'source-map',
    output: 
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js',
        libraryTarget: 'commonjs2',
    ,
    plugins: [
        new CleanWebpackPlugin(['dist/*.*']),
    ],
    externals: 
        react: 'react',
        'react-dom': 'react-dom',
    ,
);

我还注意到我正在尝试与之集成的库中的一些弃用。我已经安装了缺少的对等依赖项。我已经报告了库 here 的问题。 我相信要将它上传到 S3，我们应该在 dist 或 public 文件夹中拥有所有必要的文件以及 index.html，这些文件将作为前缀添加到 S3 中，应用程序从那里获取入口点。

对此的任何帮助将不胜感激。另外，我愿意提供任何其他信息。

【问题讨论】：

您能分享一下您的webpack.prod.js 中的内容吗？如果没有这些信息，很难知道为什么构建无法正常工作？？？？

嗨@JuanCaicedo。感谢您查看我的帖子。您能否在描述中找到更新的 webpack.prod.js（上面已编辑）。如果您需要任何其他信息，请告诉我。

您希望在dist 目录中看到哪些文件？据我所知，只获取一个 js 文件是正确的行为（所有 js 文件都合并到一个包中）。是否还有其他文件丢失？

如果这是正确的行为，我想知道将它作为静态网站托管在 S3 上我缺少什么。当我在 S3 存储桶中添加 bundle.js 和 bundle.map.js 并使其可公开访问时。在尝试访问存储桶路径时。应该有一个入口点或根文件，从那里加载应用程序，例如在角度它是 index.html。同样，这在 reactjs 中是如何工作的。

【参考方案1】：

查看您的package.json 文件，您似乎没有使用过create-react-app。

我建议使用它简单地创建一个新的 React.js 应用程序，并将您的应用程序的内容复制到新创建的中。这很简单，而且很有效。

希望这会有所帮助。

【讨论】：

感谢您的建议@Daniele。当我尝试您的建议时，我收到以下错误。 react-scripts start 找不到所需的文件。名称：index.js 找了好几个地方，在这里问。在样板代码中，index.js 位于 ./src 文件夹中。在我的应用程序中，它位于：src>apps>demo>index.js 感谢您对此的帮助。

如果问题只是文件 @Santosh 的路径，您可以将其移动到 create-react-app 期望找到它的位置。换句话说，你似乎在“浪费”时间试图解决一些 create-react-app 已经解决的问题。如果您的目标是学习 webpack，那么继续，您不是在浪费时间，而是在投入时间。如果你的目标是拥有一个可以工作的 react 应用程序，我强烈建议你重新考虑你的工作。以我为例，我对 webpack 一无所知，但是感谢 create-react-app，我能够在 5 分钟内运行（并构建）新的 react 应用程序。希望这会有所帮助。

【参考方案2】：

仅仅让事情发挥作用是不够的。你应该通过一个简单的指南来逐步设置这些东西

creating-a-production-ready-webpack-4-config-from-scratch

react-boilerplate using WebPack 4

在搞乱像这样的复杂项目之前，先尝试一些简单的样板项目

react-boilerplate

react-webpack-boilerplate

是的，从 create-react-app 开始也很好，正如 @Daniele Ricci 所建议的那样，您可以使用 react-scripts eject 来了解幕后发生的事情。