typescript - 如何从 webpack 将 js 文件分组到子文件夹中？

Question

使用 Webpack 5，TypeScript 3.9，我一直在尝试将所有转译的 js 文件放入一个js子文件夹中。无济于事。输出文件只是放置在dist文件夹的根级别。由于这是我第一次使用 webpack，我可能会做一些愚蠢的事情。

我想要的输出树：

index.html
js/
  main.js
  ....
css/   etc.

webpack.config.dev.js

module.exports = {
  mode: 'development', // doesn't matter if set to 'production' either
  entry: {
    main: './src/index.ts',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              outDir: './dist/js/' // doesn't seem to do anything;
            }
          }
        },
        exclude: /node_modules/,

      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
};

tsconfig（注意删除的 outDir）

{
  "compilerOptions": {
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

标签： typescriptwebpacktsconfig