如何配置webpack与babel将Node.js端ES6文件转译为普通JavaScript？

Let's work through this step by step—your core issue stems from Webpack trying to handle Node-specific modules and browser-focused loaders that don't belong in a server-side bundle, plus missing configurations to properly target Node.js. Here's how to fix everything:

Step 1: Install Critical Dev Dependency #

First, add webpack-node-externals to your project. This tool automatically excludes all node_modules dependencies from your bundle (Node.js can natively require these at runtime, so we don't need to package them):

npm install webpack-node-externals --save-dev

Step 2: Revise Your webpack.config.js #

We'll strip out unnecessary loaders, add external dependency handling, and tweak Babel to target your Node.js version:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: "./src/js/app.js",
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist/js")
  },
  target: "node", // Critical for Node.js bundle behavior
  mode: "development",
  externals: [nodeExternals()], // Skip bundling node_modules
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            ["env", {
              "targets": {
                "node": "current" // Only transpile syntax your Node version doesn't support
              }
            }],
            "stage-0"
          ]
        }
      }
    }]
    // Removed CSS/LESS/image loaders—these are for browser bundles, not server code!
  },
  // Handle dynamic require warnings (common in server configs)
  ignoreWarnings: [
    { message: /Critical dependency: the request of a dependency is an expression/ }
  ],
  resolve: {
    // If ./local_settings is missing or in a non-standard path, add an alias here:
    // alias: {
    //   './local_settings': path.resolve(__dirname, './path/to/your/local_settings.js')
    // }
  }
};

Step 3: Update package.json #

Adjust scripts and dependencies to align with the new bundle workflow:

{
  "main": "dist/js/app.js", // Point to your bundled production file
  "scripts": {
    "start": "nodemon ./src/js/app.js --exec babel-node -e js", // Dev mode with live reload
    "build": "webpack --mode production", // Optimized production bundle
    "watch": "webpack --watch --mode development", // Auto-rebuild on source changes
    "start:prod": "node dist/js/app.js" // Run bundled production code
  },
  "dependencies": {
    "bcrypt": "^2.0.1",
    "body-parser": "^1.18.2",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "jsonwebtoken": "^8.2.1",
    "mongodb": "^3.0.8",
    "aws-sdk": "^2.1000.0" // Ensure this is installed if your code uses it
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-node-externals": "^1.7.2" // New dependency we added
  }
}

Key Fixes Explained #

1. Excluding Node Modules: webpack-node-externals solves the tls/net/fs/aws-sdk errors by telling Webpack to skip bundling these—Node.js can load them directly from node_modules at runtime.
2. Removing Browser Loaders: CSS/LESS/image loaders are irrelevant for server-side code; keeping them caused unnecessary parsing errors.
3. Babel Target Tuning: Setting targets.node: "current" ensures Babel only transpiles ES6+ syntax your Node.js version doesn't natively support, resulting in cleaner, faster code.
4. Dynamic Require Warnings: The ignoreWarnings flag suppresses harmless warnings from dynamic require calls (common in server configs). If you want to fix them properly, use Webpack's ContextReplacementPlugin to limit the scope of dynamic imports.
5. Local Settings: If ./local_settings is a missing or custom path, add an alias in the resolve section to point Webpack to the correct file.

Test the Workflow #

1. Run npm run build to create your bundled code
2. Start the production server with npm run start:prod
3. For development, use npm run start to run unbundled code with live reload via nodemon and babel-node

内容的提问来源于stack exchange，提问作者user1063287