后端 API 服务器 Typescript/Webpack 构建：找不到模块：错误：无法解析

Question

在构建我的 TS 应用程序时，我得到一个错误列表。我猜它们是 Webpack 错误，但我不知道如何解决它们......

ERROR in ./~/errorhandler/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/errorhandler'

ERROR in ./~/serve-favicon/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/serve-favicon'

ERROR in ./~/etag/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/etag'

ERROR in ./~/express/lib/request.js
Module not found: Error: Can't resolve 'net' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/express/lib'

ERROR in ./~/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/express/lib'

ERROR in ./~/send/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/send'

ERROR in ./~/destroy/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/destroy'

ERROR in ./~/mime/mime.js
Module not found: Error: Can't resolve 'fs' in '/Users/yves/Developments/IDEALCOMS/project/api_cockpit/node_modules/mime'

webpack.config.common.js

var webpack = require('webpack');

module.exports = {
  entry: {
    'app': './src/index.ts'
  },

  resolve: {
    extensions: ['.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: 'ts-loader'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        loader: 'raw-loader'
      }
    ]
  },
  plugins: []
};

webpack.config.dev.js

const path = require('path');

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

var env = require('./env.json');

module.exports = webpackMerge(commonConfig, {

  devtool: 'cheap-module-eval-source-map',

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

  plugins: []

});

更新 ============================

看完博文找到了解决办法：Backend Apps with Webpack

webpack.config.dev.js

const path = require('path');
var fs = require('fs');

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

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = webpackMerge(commonConfig, {

  devtool: 'cheap-module-eval-source-map',

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'backend.js',
    chunkFilename: '[id].chunk.js'
  },
  externals: nodeModules,

  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin('require("source-map-support").install();',
      { raw: true, entryOnly: false })
  ]

});

Answer 1

看来你必须在 webpack 配置文件中提到target。

试试这个

target: 'node',

将上面的行添加到你的 webpack 配置文件中。上面的配置选项告诉 webpack 不要碰任何内置模块。