我正在通过与Github的自动部署集成，将一个非常基本的仅前端的React应用程序(本质上是一个静态站点(部署到Heroku。我以前用过一个更复杂的应用程序，没有遇到任何问题。但现在，当我部署时，我在日志中得到了以下输出：
2020-05-02T11:18:53.190530+00:0应用程序[web.1]：[34mℹ[3900万[90m³wds³[39m:提供webpack输出
2020-05-02T11:18:53.190635+00:0应用程序[web.1]：[34mℹ[3900万[900万字[39米：不是来自webpack的内容由/app/public 提供
2020-05-02T11:18:53.190727+00:0应用程序[web.1]：[34mℹ[3900万[90m]wds[39m:404秒将回退到/
2020-05-02T11:18:53.190910+00:0 app[web.1]：开始开发服务器
2020-05-02T11:18:53.190912+00:0应用程序[web.1]：
2020-05-02T11:18:53.287654+00:0 heroku[web.1]：状态已从更改开始崩溃
当我第一次得到这个时，这个语句是准确的。我有一些像src='/image.jpg'一样加载的图像。但我把我在应用程序中实际使用的所有资产都移到了src/images中，现在正在将它们作为组件导入。我已经检查了src目录中的每个文件四次，并且不再引用公共目录中的文件。
我没有做任何自定义的Webpack配置，它都是默认的CRA。那么，为什么它仍然抛出这个错误，我该如何解决它呢？
项目层次结构：
├── src
│ └── index.js
│ └── app.js (etc)
│ └── images (this is where I am importing any images into my components now)
├── public
│ ├── index.html
│ ├── favicon.jpg
│ │── manifest.json
│ └── robots.txt
├── package.json
├── package-lock.json
├── .gitignore
webpack.config.js
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
},
所以，我得到了一个解决方案，Heroku默认使用nodejs构建包。您需要添加CRA(创建反应应用程序(。
首先，检查使用heroku buildpacks -a <appname>的构建包
然后更改为CRA构建包heroku buildpacks:set mars/create-react-app -a <appname>
然后重新部署。
您可以阅读本文了解更多配置
Heroku使用默认的构建包作为Heroku/nodejs。Need也会在Heroku应用程序设置中更改构建包配置。您可以使用下面添加的git url作为react应用的构建包
https://github.com/mars/create-react-app-buildpack
您可以添加对象"发动机"；在package.json(版本节点&npm使用构建你的应用程序(
"engines": {
"node": "10.15.3",
"npm": "6.14.5"
}
***校验版本：node -v&npm -v
p/s：它对我有用。