Я развертываю довольно простое c приложение React только для внешнего интерфейса (по сути, сайт stati c) в Heroku через интеграцию автоматического развертывания с Github. Я сделал это раньше с более сложным приложением и не было никаких проблем. Но теперь при развертывании я получаю следующие выходные данные:
2020-05-02T11: 18: 53.190530 + 00: 00 app [web.1]: [34mℹ [39m [ 90 м ds wds ｣[39 м: выход веб-пакета подается из
2020-05-02T11: 18: 53.190635 + 00: 00 app [web.1]: [34 м ℹ [39 м [90 м｢ wds ｣[39 м: Контент не из веб-пакета подается из / app / publi c
2020-05-02T11: 18: 53.190727 + 00: 00 app [web.1]: [34 мℹ [39 м [90 м ｢wds｣ [ 39m: 404 с откатом к /
2020-05-02T11: 18: 53.190910 + 00: 00 приложение [web.1]: запуск сервера разработки ...
2020-05- 02T11: 18: 53.190912 + 00: 00 app [web.1]:
2020-05-02T11: 18: 53.287654 + 00: 00 heroku [web.1]: состояние изменено с начала на сбой
Когда я впервые получил это, утверждение было точным. У меня было несколько изображений, которые я загружал как src='/image.jpg'. Но я переместил все ресурсы, которые я на самом деле использую в своем приложении, в src / images и теперь импортирую их как компоненты. Я четыре раза просматривал каждый файл в своем каталоге sr c, и в каталоге publi c больше нет ссылок на файлы.
Я не сделал никакой пользовательской конфигурации 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',
},