为什么 webpack 试图捆绑我的测试文件？答案

【问题标题】：Why is webpack trying to bundle my test files?为什么 webpack 试图捆绑我的测试文件？
【发布时间】：2023-02-17 00:02:03
【问题描述】：

我的项目中有两个主要目录：“src”和“specs”。我的 webpack 配置的入口点设置为 src 中的一个文件。 webpack 配置的上下文也设置为 src 目录。我的 package.json 中有一个安装后挂钩，只要通过“npm install”安装包，它就会将应用程序捆绑到 dist 文件夹中。这也意味着未安装 devDependencies，这就是导致我的 npm 安装失败的原因。显然 webpack 试图处理规范中的文件，但由于未安装 devDependencies 而无法执行。

知道为什么 webpack 认为它应该处理 specs 目录中的文件吗？

这是我完整的 webpack 配置：

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const NODE_ENV = "development";

const client = {
  entry: path.join(__dirname, "src", "browser_sdk", "index.ts"),
  context: path.resolve(__dirname, "src", "browser_sdk"),
  target: "web",
  mode: NODE_ENV,
  devtool: "source-map",
  watch: false,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "client.js",
    library: {
      type: "umd",
    },
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules.*\.js$/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  externals: {
    "pg-native": "require('pg-native')"
  },
  optimization: {
    minimize: false,
  },
};

const server = {
  entry: path.join(__dirname, "src", "server", "index.ts"),
  context: path.resolve(__dirname, "src", "server"),
  mode: NODE_ENV,
  target: "node",
  externals: [nodeExternals(), 'pg-native'],
  watch: false,
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "server.js",
    library: {
      type: "umd",
    },
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules.*\.js$/,
      },
    ],
  },
};

module.exports = [server, client];

【问题讨论】：

另一个有趣的是，当包被安装到另一个项目中时，它会被放置到这个项目的 node_modules 文件夹中。所以一个简单的 exclude: /node_modules/ 将排除项目的所有文件，因为整个项目都在 node_modules 文件夹中
该信息需要在您的问题帖子中，而不是在此处。

标签： javascript node.js typescript npm webpack

【解决方案1】：

以下配置解决了我的问题。我使用 transpileOnly 来防止 specs 目录被捆绑，我写了一个自定义排除处理程序来防止 node_module 被捆绑。

  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            transpileOnly: true
          },
        },
        exclude: (e) => {
          let file = e.replace(__dirname, '.');

          return file.match(/node_modules/)
        }
      },
    ],
  },

【讨论】：