Я пытаюсь использовать веб-пакет в моем Express API (который использует TS FYI). Я создал три файла webpack.common.js
, webpack.dev.js
и webpack.prod.js
, чтобы иметь разные конфигурации в разных средах.
webpack.common. js
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/app.ts',
target: 'node',
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ['.ts', '.js'],
plugins: [new TsConfigPathsPlugin({
extensions: ['.ts', '.js'],
})],
},
};
webpack.dev. js
const path = require('path');
const common = require('./webpack.common');
const webpackMerge = require('webpack-merge');
module.exports = webpackMerge(common, {
mode: 'development',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist',
},
devtool: 'inline-source-map',
});
webpack.prod. js
const path = require('path');
const common = require('./webpack.common');
const mergeWebpack = require('webpack-merge');
module.exports = mergeWebpack(common, {
// mode: 'production',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'none',
});
А вот мой package.json
file.
{
"name": "express-ts-boilerplate",
"version": "0.1.0",
"description": "Express Typescript Boilerplate",
"main": "src/server.js",
"author": "mymavourneen.com",
"scripts": {
"start": "node dist/bundle.js",
"build": "webpack --config webpack.prod.js",
"dev": "webpack --config webpack.dev.js"
},
"dependencies": {
"app-root-path": "^3.0.0",
"bcrypt": "^3.0.6",
"cors": "^2.8.5",
"dotenv": "^8.1.0",
"express": "^4.17.1",
"express-pino-logger": "^4.0.0",
"express-validator": "^6.2.0",
"firebase-admin": "^8.5.0",
"helmet": "^3.20.1",
"jsonwebtoken": "^8.5.1",
"mongodb": "^3.3.2",
"mongoose": "^5.6.11",
"morgan": "^1.10.0",
"winston": "^3.2.1"
},
"devDependencies": {
"@types/app-root-path": "^1.2.4",
"@types/bcrypt": "^3.0.0",
"@types/cors": "^2.8.6",
"@types/dotenv": "^6.1.1",
"@types/express": "^4.17.1",
"@types/express-pino-logger": "^4.0.0",
"@types/helmet": "^0.0.44",
"@types/jsonwebtoken": "^8.3.3",
"@types/mongodb": "^3.3.1",
"@types/mongoose": "^5.5.16",
"@types/morgan": "^1.9.0",
"@types/node": "^12.7.3",
"@types/winston": "^2.4.4",
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"clean-webpack-plugin": "^3.0.0",
"eslint": "5",
"eslint-config-prettier": "^6.1.0",
"eslint-plugin-prettier": "^3.1.0",
"husky": "^3.0.5",
"lint-staged": "^9.2.5",
"nodemon": "^1.19.1",
"pino-pretty": "^3.2.1",
"prettier": "^1.18.2",
"ts-loader": "^7.0.0",
"ts-node": "^8.3.0",
"tsconfig-paths": "^3.9.0",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.6.2",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,json,css,md}": [
"prettier --single-quote --write",
"git-add"
]
},
"nodemonConfig": {
"ignore": [
"**/*.test.ts",
"**/*.spec.ts",
".git",
"node_modules"
],
"watch": [
"src"
],
"exec": "NODE_ENV=development node -r tsconfig-paths/register -r ts-node/register ./src/app.ts",
"ext": "ts, js"
}
}
Теперь, если я выполню npm run dev
, он создаст файлы, и я получу файл bundle.js
в папке dist
, как и ожидалось. Если я сейчас запускаю npm start
, который запускает файл комплекта. js, сервер запускается как положено, и все работает нормально.
Теперь, если я выполню npm run build
, он создаст рабочую версию bundle.js
. Теперь, если я запускаю npm start
, он запускает связку. js, но он просто застревает в терминале. Логов нет, сервер не запускается. Он просто зависает после запуска файла bundle.js
с использованием npm start
.
Единственное различие, которое я вижу, состоит в том, что режим отличается в обоих методах. Остальная конфигурация почти такая же, но мой API не работает с производственной сборкой. Работает только с разработкой.
Вот снимок экрана, когда процесс зависает после запуска производственной сборки.
![enter image description here](https://i.stack.imgur.com/DPFBU.jpg)
ПРИМЕЧАНИЕ: ys
является псевдоним для yarn start
Есть что-то, что я здесь скучаю? Я новичок в вебпаке и буду очень признателен за помощь