Question

由于某种原因，我无法让Heroku构建我的webpack react应用程序。似乎构建的js文件不存在。如果我将test.js（未构建）放在公用文件夹中，那么索引会加载它。

Procfile

build: npm run prod 
web: node ./server.js

的package.json

"scripts": {
"start": "export NODE_ENV=development&&npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": " webpack-dev-server --progress --colors --port 8080",
"build": "export NODE_ENV=development&& webpack --progress --colors",
"prod": "export NODE_ENV=production&& webpack --progress -p",
"copy": "node copyStatic.js",
"lint": "eslint app/**"
},
"engines": {
"node": "7.7.0",
"npm": "4.4.0"
},

webpack.config

var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'app');
var PROD = process.env.NODE_ENV == 'production';

var config = {

entry: {
    app: PROD ? ['babel-polyfill', APP_DIR + '/index.js'] : ['babel-polyfill', APP_DIR + '/index.js', 'webpack-dev-server/client?http://0.0.0.0:8080'],
    animations: APP_DIR + '/animations/animations.js'
},
output: {
    path: BUILD_DIR,
    filename: "[name].js",
},
plugins: [],
module: {
    rules: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            use: ['babel-loader']
        },
        {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader?importLoaders=1',
                'postcss-loader?sourceMap=inline'
            ]
        },
        {
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            use: 'file-loader'
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: 'file-loader'
        },
        { test: /\.json$/, use: "json-loader" }

    ]

},
devServer: {
    historyApiFallback: {
        index: 'index.html'
    }
},
resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
        "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
        "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
        "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
        "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js')
    }
},
node: {
    //console: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
}
};

module.exports = config;

Webpack配置

var BUILD_DIR = path.resolve(__dirname, 'public');
//////other config
output: {
    path: BUILD_DIR,
    filename: "[name].js",
},

在公共文件夹中的index.html中：

<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./test.js"></script>

test.js加载。 app.js没有。相同的设置在本地工作正常

Answer 1

这是因为我有不正确的buildpack配置。我在应用程序设置中将其切换到heroku / nodejs，一切正常

heroku没有构建我的webpack应用程序

1 个答案: