我正在通过与 Github 的自动部署集成将一个非常基本的前端 React 应用程序(本质上是一个静态站点)部署到 Heroku。我以前用一个更复杂的应用程序做过这个,没有问题。但是现在我在部署时在我的日志中得到以下输出:
2020-05-02T11:18:53.190530+00:00 app[web.1]: [34mℹ[39m [90m「wds"[39m: webpack 输出来自
2020-05-02T11:18:53.190635+00:00 app[web.1]: [34mℹ[39m [90m“wds”[39m: 不是来自 webpack 的内容是从 /app/public 提供的
2020-05-02T11:18:53.190727+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: 404s 将回退到 /
2020-05-02T11:18:53.190910+00:00 app[web.1]:启动开发服务器...
2020-05-02T11:18:53.190912+00:00 应用程序[web.1]:
2020-05-02T11:18:53.287654+00:00 heroku[web.1]:状态从开始变为崩溃
当我第一次得到这个时,这个陈述是准确的。我有一些我正在加载的图像src='/image.jpg'
。但是我将我在应用程序中实际使用的所有资产移动到 src/images 中,并且现在将它们作为组件导入。我已经检查了 src 目录中的每个文件四次,并且不再有对 public 目录中文件的任何引用。
我没有做过任何自定义的 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',
},