【发布时间】：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 中是如何工作的。
标签： reactjs npm build react-dom