Question

在本地，它工作正常，但在将其推送到heroku服务器时，bundle.js文件在'view-source：https://mango-world.herokuapp.com/中显示为空白，您可以打开网址https://mango-world.herokuapp.com/ 下面给出了文件夹结构。

server.js：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use('/assets',express.static(__dirname + '/assets'));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'index.html'));
});

app.listen(port);

console.log('Server started in the port:'+port);

的package.json：

    {
      "name": "react-ground",
      "version": "1.0.0",
      "description": "Set up a react from scratch",
      "main": "index.js",
      "engines": {
        "node": "6.11.5"
      },
      "scripts": {
        "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
        "prod": "NODE_ENV=production node server.js",
        "postinstall": "webpack -p"
      },
      "author": "Tapash",
      "license": "MIT",
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-1": "^6.24.1",
        "babel-preset-stage-3": "^6.24.1",
        "file-loader": "^1.1.5",
        "image-webpack-loader": "^3.4.2",
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4"
      },
      "dependencies": {
        "axios": "^0.17.1",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-1": "^6.24.1",
        "express": "^4.16.2",
        "file-loader": "^1.1.5",
        "image-webpack-loader": "^3.4.2",
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "react-redux": "^5.0.6",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.2",
        "redux-form": "^7.1.2",
        "redux-thunk": "^2.2.0",
        "webpack": "^3.8.1"
      }
    }

**webpack.config.js:**
module.exports = {
    entry: ['./src/index.js'],
    output: {
        path: __dirname,
        publicPath: '/assets/build/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {                
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015', 'stage-1']
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        query: {
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            mozjpeg: {
                                progressive: true
                            },
                            gifsicle: {
                                interlaced: true
                            },
                            optipng: {
                                optimizationLevel: 7
                            }
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    }
}

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mango</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.css">
    <!-- Style CSS -->
    <link rel="stylesheet"  href="/assets/css/style.css" />
</head>
<body>
    <div id="root"></div>
    <script type="text/jsx" src="/assets/build/bundle.js"></script>
</body>
</html>

请随时提出任何问题。任何帮助将不胜感激。

在heroku中成功构建后，bundle.js文件为空

0 个答案: