Webpack: 借助 Babel+TS+ESLint 构建现代 JS 工程环境

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.ts', // 项目入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包文件放置的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则表达式，匹配 .ts 或 .tsx 文件
        use: 'ts-loader', // 使用 ts-loader 处理 TypeScript 文件
        exclude: /node_modules/ // 排除 node_modules 目录
      },
      {
        test: /\.js$/, // 正则表达式，匹配 .js 文件
        use: ['babel-loader', 'eslint-loader'], // 使用 babel-loader 和 eslint-loader 处理 JS 文件
        exclude: /node_modules/ // 排除 node_modules 目录
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 自动解析的文件扩展名
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包进度条
  ],
  devtool: 'source-map', // 开发工具，用于生成 source map 文件
  performance: {
    hints: false // 关闭性能警告
  },
  // 通过 npm 脚本传递的参数，例如 --env.production
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};

这个配置文件定义了一个基本的 Webpack 构建流程，用于将 TypeScript 和 JavaScript 文件打包在一起，同时利用 Babel 和 ESLint 进行代码转换和质量检查。它设置了入口文件、输出配置、模块加载规则、插件和模式。这为开发现代 JavaScript 应用程序提供了一个高效且可扩展的构建环境。