Question

我正在尝试在Express API中使用webpack（使用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文件。

{
  "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并运行bundle.js文件，则服务器将按预期方式启动，并且一切正常。

现在，如果我执行npm run build，它将生成bundle.js的生产版本。现在，如果我运行npm start，它将运行bundle.js，但它只会卡在终端上。没有日志，服务器无法启动。使用bundle.js运行npm start文件后，它将挂起。

我看到的唯一区别是两种方法的模式都不同。其余配置几乎相同，但是我的API在生产版本中不起作用。它仅适用于开发版本。

这是运行生产版本后流程挂起时的屏幕截图。

注意：ys是yarn start的别名

在这里我想念什么吗？我是webpack的新手，非常感谢您的帮助

带有webpack的Express API可在开发模式下使用，但不能在生产模式下使用

0 个答案: