使用Webpack 2将同命名空间的TypeScript文件打包为单个文件

Hey there! Since you're new to Webpack and aiming to bundle all your TypeScript files into one single JavaScript file, let's walk through this step by step, using your existing tsconfig.json as a starting point.

First, Clean Up Your Existing tsconfig.json #

Looking at your config, most settings are already solid—target: es6, module: commonjs, and enabled source maps play nicely with Webpack. Just a tiny fix: your exclude value has a typo ("node_modules..." should be "node_modules"). Here's the polished version:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules"
  ]
}

Step 1: Install Required Dependencies #

You'll need a few packages to make Webpack work seamlessly with TypeScript. Run this command in your project root:

npm install webpack webpack-cli typescript ts-loader --save-dev

• webpack & webpack-cli: The core bundler and its command-line interface
• typescript: The foundation for processing your TypeScript code
• ts-loader: The loader that lets Webpack understand and compile .ts files

Step 2: Create a Webpack Config File #

Make a new file named webpack.config.js in your project root. This file tells Webpack exactly how to bundle your code. Here's a minimal, working config tailored to your needs:

const path = require('path');

module.exports = {
  // Point this to your main TypeScript file (the one that imports all other TS files)
  entry: './src/index.ts',
  output: {
    // The name of your single bundled JS file
    filename: 'bundle.js',
    // The folder where the bundled file will live
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        // Tell Webpack to use ts-loader for all .ts files
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // Resolve these extensions so you don't have to type them in import statements
  resolve: {
    extensions: ['.ts', '.js'],
  },
  // Use 'development' for debugging, switch to 'production' for minified, optimized code
  mode: 'development',
  // Enable source maps to match bundled JS back to your original TS code
  devtool: 'source-map',
};

Pro tip: Double-check that the entry path points to your project's main TypeScript file—this is the "root" file that pulls in all other TS modules you want bundled.

Step 3: Add a Build Script to package.json #

Open your package.json and add a scripts entry to run Webpack with a single command:

{
  "scripts": {
    "build": "webpack"
  }
}

Step 4: Test the Bundle #

1. If you don't have one already, create a src folder and add your main TS file (e.g., src/index.ts) plus any other TypeScript files you want included in the bundle.
2. Run the build command:

npm run build

You'll see a dist folder pop up with your bundle.js file—this is your single, compiled JavaScript bundle, built from all your TypeScript code!

Quick Extra Tips #

• For a production-ready, minified bundle, switch mode: 'development' to mode: 'production' in webpack.config.js.
• If you want to use ES modules later, you can update module: 'esnext' in tsconfig.json—Webpack will handle it smoothly for bundling.

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