快递应用程序：webpack bundle.js不提供
我是使用express开发应用程序的新手，我正在使用Node-Express-Angular4和Postgres创build应用程序。 我正在使用webpack来构build应用程序，并将其部署到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的构build过程是成功的，但我总是得到一个错误
Uncaught SyntaxError: Unexpected token <
因为bundle.js不服务（404）和index.html是由于我在app.js设置来处理404错误。 我尝试调整webpackconfiguration中的publicPath ，但没有奏效。 我在这里做错了什么。 任何帮助表示赞赏。