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

Question

我有一个 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 中。

如有任何帮助，我们将不胜感激。此外，我愿意提供任何其他信息。

Answer 1

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

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

希望这对您有所帮助。