从 webpack 中排除文件夹答案

【问题标题】：Exclude a folder from webpack从 webpack 中排除文件夹
【发布时间】：2020-05-05 16:27:36
【问题描述】：

我的应用中有一个子项目，其中包含一个无法编译的文件：misc/index.ts

如何让 webpack 完全忽略该文件或文件夹？

如何重现

webpack --mode development

预期行为

Webpack 可以成功运行，就像 misc 文件夹不存在时一样。

实际行为

Webpack 抱怨 misc/index.ts 无法编译。

补充说明

misc/index.ts 文件在任何地方都不需要。

文件misc/index.ts 不是故意编译的，因为我希望 webpack 完全忽略该文件夹。

理想情况下，我想告诉 webpack opt-in 一些文件，而不是排除一些文件。

项目结构

.
├── misc
│   └── index.ts
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
│   └── index.ts
├── tsconfig.json
└── webpack.config.js

您可以在https://github.com/sguillia/webpack-exclude 尝试它：只需克隆并执行npm run build

我的尝试

我没有找到让 webpack 忽略文件夹的选项。

排除规则不决定 webpack 正在解析哪些文件，正如 here 解释的那样。

module.noParse 我也没有成功。

webpack.config.js

//@ts-check

"use strict"

const path = require("path")

/**@type {import('webpack').Configuration}*/
const config = {
    target: "node",

    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        libraryTarget: "commonjs",
        devtoolModuleFilenameTemplate: "../[resource-path]",
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts"],
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader",
                    },
                ],
            },
            {
                test: /\.ts$/,
                exclude: /misc/,
            },
        ],
    },
}
module.exports = config

【问题讨论】：

标签： webpack

【解决方案1】：

Typescript 也出现了问题 (tsc -p .)

tsconfig.json中的解决方案：

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
  },
  "include": [
    "src"
  ]
}

这样，我可以选择加入文件。

【讨论】：