Webpack配置问题：TS转译JS与既有JS文件无法合并打包

你的问题核心在于Webpack只会打包入口文件（entry）及其依赖链上的文件，你之前只把TS文件设为入口，script.main.js没被入口引用，也没加入入口列表，所以即使写了模块规则也不会被打包。模块规则只是告诉Webpack如何处理特定类型的文件，不是主动抓取文件打包的逻辑。

正确的配置调整方式 #

1. 更新Entry配置 #

把需要打包的JS文件加入entry数组，Webpack会同时处理TS和指定JS文件，最终合并到同一个输出bundle中：

const path = require("path");

module.exports = {
    // 将TS和目标JS文件都设为打包入口
    entry: ["./typescript/app.ts", "./src/js/script.main.js"],
    devtool: 'source-map',
    output: {
        filename: "app.js",
        path: path.resolve(__dirname, "src/js/build")
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
        modules: ['typescript', 'src/js', 'node_modules']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/, // 匹配.ts和.tsx文件
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'typescript')],
                exclude: /node_modules/ // 排除node_modules，提升打包效率
            }
            // 原生JS文件无需额外规则，Webpack默认支持解析
        ]
    }
}

2. 关键说明 #

• Entry数组：Webpack会将数组内所有文件作为打包起点，最终合并到同一个输出文件（当output.filename为固定名称时）。
• TS规则优化：将test: /\.ts/改为/\.tsx?$/以兼容TSX文件，同时添加exclude: /node_modules/避免处理无关文件。
• JS文件处理：原生JS文件不需要额外loader，Webpack默认会解析并打包这类文件。

3. 验证打包效果 #

运行Webpack命令后，检查src/js/build/app.js，应该同时包含TS转译后的代码和script.main.js的内容。

备选方案：通过TS文件导入JS文件 #

如果不想修改entry配置，也可以在TS入口文件中直接导入目标JS文件：

// 在typescript/app.ts顶部添加导入语句
import '../src/js/script.main.js';

// 原有TS代码逻辑...

这样Webpack会将JS文件视为TS的依赖项自动打包，效果和修改entry一致。

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