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

Question

出于某种原因，我无法让 Heroku 构建我的 webpack React 应用程序。 看来构建的js文件不存在。如果我将 test.js (未构建)放入公共(public)文件夹中，则索引可以正常加载它。

配置文件

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",
},

在公共(public)文件夹中的index.html中:

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

test.js 加载。 app.js 没有。相同的设置在本地运行良好

Answer 1

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