在Heroku上部署的React包不显示图像
在Heroku上部署的React包不显示图像
提问于 2019-06-23 03:41:20
我已经在Heroku，https://tomdoan.herokuapp.com/上部署了我的包
在本地机器上，图像显示得很好，所以我现在假设在Webpack中设置的路径是正确的
部署在Heroku上，他们的生产机器似乎无法识别路径。
我不熟悉React / Deployment
在控制台中，heroku似乎无法识别我设置的路径，我在想/假设生产服务器可能已经更改了路径
非常感谢您的指导，谢谢
// package.json file
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"express": "^4.17.1",
"history": "^4.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4"
},
"engines": {
"node": "10.16.0",
"npm": "6.9.0"
},
"scripts": {
"start": "webpack && node index.js",
"build": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React
App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.4.4",
"file-loader": "^4.0.0",
"image-webpack-loader": "^5.0.0",
"ttf-loader": "^1.0.2",
"url-loader": "^2.0.0"
},
"keywords": [],
"author": "",
"license": "ISC"
}// webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public', "js"),
filename: 'bundle.js'
},
mode: 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/
},
{
loader: 'style-loader!css-loader',
test: /\.css$/
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name:"[name].[ext]",
outputPath: "images"
}
}
// test: /\.(gif|png|jpe?g|svg)$/i,
// use: [
// 'file-loader?name=[name].
// [ext]&outputPath=js/js/assets/',
// {
// loader: 'image-webpack-loader',
// options: {
// bypassOnDebug: true, // webpack@1.x
// disable: true, // webpack@2.x and newer
// },
// }]
},
{
test: /\.ttf$/,
use: [
{
loader: 'ttf-loader',
options: {
name: './font/[hash].[ext]',
outputPath: "font"
},
},
]
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map'
}回答 1
Stack Overflow用户
发布于 2019-06-24 05:48:53
我通过重新配置我的webpack解决了这个问题：
我之前在Webpack中的输出路径是
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public', "js"),
filename: 'bundle.js'.
}它创建了一个嵌套在公共文件夹中的js文件夹目录。我怀疑这与Heroku生产机的凝胶效果不太好。
解决方案：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
}.我删除了额外的js文件夹目录，只将所有资源直接输出到公共文件夹中。我没有使用path.join(__dirname，“公共”)，而是使用了path.resolve(__dirname，“公共”)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56718595
复制相关文章
相似问题
腾讯云开发者
