Webpack CLI传入.ts文件参数时静默失效，如何单独编译.ts文件？

我来帮你搞定这个问题——你遇到的情况其实是Webpack CLI处理入口参数的默认行为导致的，下面给你几个实用的解决方案：

方法1：用--entry参数直接指定入口 #

这是最直接的办法，明确告诉Webpack要构建的.ts文件，它会优先使用命令行的这个配置，忽略你webpack.config.js里的默认入口：

npx webpack --entry ./someScript.ts

方法2：命令行添加--resolve-extensions参数 #

Webpack CLI默认只认.js/.jsx这类扩展名的入口参数，你可以通过这个参数把.ts/.tsx也加入识别列表，这样直接传文件名就能生效：

npx webpack --resolve-extensions '.ts','.tsx','.js','.jsx' someScript.ts

方法3：修改配置实现动态入口（推荐） #

如果你希望既保留默认的main.ts入口，又能随时通过CLI指定其他.ts文件，可以修改webpack.config.js，让入口根据命令行参数动态切换：

const path = require('path');
// 从命令行参数里提取.ts/.tsx文件
const cliSpecifiedEntry = process.argv.slice(2).find(arg => /\.tsx?$/.test(arg));

module.exports = {
  // 如果有CLI指定的入口就用它，否则用默认的main.ts
  entry: cliSpecifiedEntry 
    ? { main: path.resolve(cliSpecifiedEntry) } 
    : { main: path.resolve('./src/main.ts') },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        use: ['babel-loader'],
        exclude: /node_modules/ // 记得加上排除node_modules的配置哦
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
};

修改完之后，运行npx webpack someScript.ts就会构建指定文件，不传参数则用默认入口，完美兼顾两种场景。

为啥原来的.ts参数会被忽略？ #

简单来说，Webpack CLI处理直接传入的文件名（位置参数）时，默认只会把.js/.jsx这类文件当作入口；而你配置里的resolve.extensions是给Webpack内核解析模块依赖用的，CLI识别入口参数时不会直接复用这个配置，所以就出现了忽略.ts文件、沿用默认入口的情况。

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