Я делаю приложение с полным стеком, с Express (написано на Typescript) и React. Я использую веб-пакет для объединения как бэкэнда, так и внешнего интерфейса.
У меня есть два отдельных конфига для веб-пакета. Один для внешнего интерфейса, а другой для внутреннего интерфейса.
Конфигурация внешнего интерфейса (webpack-fe.config.js)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpack = require('clean-webpack-plugin');
const FRONTENDSRC = path.resolve(__dirname, 'frontend/src');
module.exports = {
target: 'web',
// @babel/polyfill is needed to use modern js functionalities in old browsers.
entry: ['@babel/polyfill', path.resolve(FRONTENDSRC, 'index.js')],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle-fe.js'
},
module: {
rules: [
{
test: /\.jsx$|.js$/,
use: {
loader: 'babel-loader',
options: {
// To process async functions.
plugins: ['@babel/plugin-transform-async-to-generator']
}
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.scss$|.sass/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
modules: ['node_modules', FRONTENDSRC],
extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss']
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(FRONTENDSRC, 'index.html')
}),
new CleanWebpack(['./dist/bundle-be.js', './dist/index.html'])
],
watch: true,
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Конфигурация бэкэнда (webpack-be.config.js)
const path = require('path');
const CleanWebpack = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const projectDir = 'string value used to define path';
module.exports = {
context: projectDir,
target: 'node',
// @babel/polyfill is needed to use modern js functionalities in old browsers.
entry: [
'@babel/polyfill',
path.join(projectDir, 'backend', 'src', 'index.ts')
],
output: {
path: path.join(projectDir, 'dist'),
filename: 'bundle-be.js',
publicPath: path.join(projectDir, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
// To process async functions.
plugins: ['@babel/plugin-transform-async-to-generator']
}
},
exclude: /(node_modules|bower_components)/
},
{
test: /.ts$/,
loaders: ['ts-loader'],
exclude: /(node_modules|bower_components)/
}
]
},
resolve: {
modules: ['node_modules', path.join(projectDir, 'backend', 'src')],
extensions: ['.js', 'web.js', 'webpack.js', '.ts', '.tsx']
},
plugins: [new CleanWebpack([path.join(projectDir, 'dist', 'bundle-be.js')])],
watch: true,
externals: [nodeExternals()],
mode: 'development',
devtool: 'inline-source-map'
};
webpack.config.js
const feConfig = require('./webpack-fe.config');
const beConfig = require('./webpack-be.config');
module.exports = [feConfig, beConfig];
Вот код для инициализации сервера (index.ts)
import http from 'http';
import debug from 'debug';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import App from './server';
const config = require('../../webpack-be.config.js');
const compiler = webpack(config);
debug('ts-express:server');
class InitServer {
private port: number | boolean | string;
private server: any;
constructor() {
this.port = this.normalizePort(process.env.port || 7000);
App.set('port', this.port);
App.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
})
);
this.server = http.createServer(App);
this.server.listen(this.port);
this.server.on('error', this.onError);
this.server.on('listening', this.onListening);
}
private normalizePort = (val: number | string): number | string | boolean => {
let port: number = typeof val === 'string' ? parseInt(val, 10) : val;
if (isNaN(port)) return val;
else if (port >= 0) return port;
else return false;
};
private onError = (error: NodeJS.ErrnoException): void => {
if (error.syscall !== 'listen') throw error;
let bind =
typeof this.port === 'string' ? 'Pipe ' + this.port : 'Port ' + this.port;
switch (error.code) {
case 'EACCES':
console.error(`${bind} requires elevated privileges`);
process.exit(1);
break;
case 'EADDRINUSE':
console.error(`${bind} is already in use`);
process.exit(1);
break;
default:
throw error;
}
};
private onListening = (): void => {
console.log(`listening on ${this.port}`);
let addr = this.server.address();
let bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr.port}`;
debug(`Listening on ${bind}`);
};
}
new InitServer();
Вот файл конфигурации сервера (server.ts)
import express from 'express';
import bodyParser from 'body-parser';
import path from 'path';
import { projectDir } from './shared/constants';
class App {
public express: express.Application;
constructor() {
this.express = express();
this.middleware();
this.routes();
}
private middleware(): void {
this.express.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
next();
});
this.express.use(bodyParser.json());
this.express.use(bodyParser.urlencoded({ extended: false }));
}
private routes(): void {
this.express.get('/', function(req, res) {
res.sendFile(path.join(projectDir, 'dist', 'index.html'));
});
}
}
export default new App().express;
Я использую следующие команды в скриптах npm:
"bundle": "webpack",
"serve": "node dist/bundle-be.js"
Когда я запускаю сервер, он обслуживает мой файл index.html из папки dist, но выдает ошибку 404 для bundle-fe.js. Я проверил, что bundle-fe.js генерируется в папке dist. Так почему же это дает мне 404 за bundle-fe.js?
Заранее спасибо!