Reactjs-/dist文件夹只有2个文件-bundle。js和bundle.js。地图-不包括任何其他文件

Question

我有一个reactjs应用程序，它在开发环境中运行良好。我是说，当我使用

npm start

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

当我试着用下面的命令执行同样的操作，在AWS S3的某个地方生成一个静态托管的分发文件夹。这就是问题所在。

npm run build

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

dist

• bundle.js
• bundle.js.map

公众的

• index.html

我已经看过这些帖子（关于我得到的关于bundle.js文件大小的警告

下面是我的包裹。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',
    },
});

我也注意到了我正试图整合的库中的一些反对意见。我已经安装了缺失的对等依赖项。我已经在这里报告了图书馆的问题。我相信上传到S3，我们应该有所有必要的文件在dist或公共文件夹随着index.html，这将作为一个前缀添加在S3从那里的应用程序获得的入口点。

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

Answer 1

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

> < li>

从头开始创建生产就绪型webpack-4-config

使用WebPack 4反应样板文件

在处理这样复杂的项目之前，尝试一些简单的样板项目

> < li>

反应-样本

react webpack样板文件

是的，从创建 - 反应 - 应用程序开始也很好，正如@Daniele里奇所建议的那样，您可以使用反应脚本弹出来了解引擎盖下发生了什么。

Answer 2

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

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

希望这能有所帮助。