Question

我是使用express构建应用程序的新手，我正在使用Node-Express-Angular4和Postgres创建应用程序。我正在使用webpack来构建应用程序，我正在将它部署到heroku。以下是我的app.js文件

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var appRoutes = require('./routes/app');
var eventRoutes = require('./routes/events');
var userRoutes = require('./routes/user');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/material_css',express.static(path.join(__dirname, '/node_modules/@angular/material/prebuilt-themes/')));
app.use('/ng2-toastr',express.static(path.join(__dirname, '/node_modules/ng2-toastr/bundles/')));
// app.use(express.static(path.join(__dirname, 'stylesheets')));

//sequelize checking connection
var models = require('./models/');
models.sequelize
    .authenticate()
    .then(function () {
        console.log('Connection successful');
    })
    .catch(function(error) {
        console.log("Error creating connection:", error);
    });

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
    next();
});

app.use('/event', eventRoutes);
app.use('/user', userRoutes);
app.use('/', appRoutes);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    return res.render('index');
});


module.exports = app;

index.hbs

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel='stylesheet' type="text/css" href='/stylesheets/style.css'>

</head>
<body>
<my-app>Loading...</my-app>

<script type="text/javascript" src="/js/app/bundle.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/5fe6a32bd8.js"></script>
</body>
</html>

webpack.config.prod.js

var path = require('path');

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');

module.exports = webpackMerge.smart(commonConfig, {
    entry: {
        'app': './assets/app/main.aot.ts'
    },

    output: {
        path: path.resolve(__dirname + '/public/js/app'),
        filename: 'bundle.js',
        publicPath: '/js/app/',
        chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular-router-loader?aot=true'
                ]
            }
        ]
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false
        })
    ]
});

最后是我的 package.json 脚本部分

"scripts": {
    "start": "node ./bin/www",
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
  },

当我将它部署到heroku时，构建过程成功，但我总是收到错误

Uncaught SyntaxError: Unexpected token <

由于我在app.js中设置了处理404错误，因此未提供bundle.js（404）并且提供了index.html。我尝试在webpack配置中调整publicPath，但它不起作用。我在这做错了什么。任何帮助表示赞赏。

快递应用：不提供webpack bundle.js

0 个答案: