Webpack 创建两个没有入口点的包

Question

我有以下源设置：

src
|__ client
|  |__ a.ts
|  |__ b.js
|
|__ common
|  |__ c.ts
|  |__ d.js
|
|__ server
|  |__ e.ts
|  |__ f.js

typescript 和 javascript 文件都可以存在于源代码中。但是，没有入口点（没有“主文件”）。

我的目标是获得两个捆绑包：

• bundle_client.js
• bundle_server.js

每个包都包含它们相应的代码（打字稿转译，JS 只是通过，但是打字稿转译器可以使用 allowJs 来完成），以及包含来自 common 的代码的两个包。

使用 gulp 很容易，但我想迁移到 webpack，但我想不通。

这是我目前拥有的损坏配置：

const path = require('path');
const glob = require("glob");

const config = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ],
        resolve: {
            extensions: ['.tsx', '.ts', '.js']
        }
    },
};

const clientConfig = Object.assign({}, config, {
    name: "client",
    //entry: glob.sync("./src/client/**/*.ts"),
    module: {
        rules: [
            {
                include: ['/src/client/**/*', '/src/common/**/*'],
                // test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    output: {
        filename: 'bundle_client.js',
        path: path.resolve(__dirname, 'out')
    }
});

const serverConfig = Object.assign({}, config, {
    name: "server",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
                include: '/src/server/**/*'
            }
        ]
    },
    output: {
        filename: 'bundle_server.js',
        path: path.resolve(__dirname, 'out')
    }
});

module.exports = [
    clientConfig, serverConfig,
];

谷歌搜索我发现了一些应该有帮助的东西：

• 导出多个配置允许我创建单独的包
• 我可以使用 blob 将所有文件作为入口点

Answer 1

再读一些，我突然想起你可以在项目结构的子目录中拥有子tsconfig.json 文件。也明确了 webpack 真的非常想要一个入口点，所以我做出了妥协，找到了一个相当优雅的解决方案。

我在客户端和服务器目录中都添加了main.ts，以及tsconfig.json。主要（入口点），导入其余部分（以便 webpack 可以创建其依赖关系图），我有 3 个tsconfig.json 文件。

src/tsconfig.json:

{
  "compilerOptions": {
    "module": "es6",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowJs": true,
    "target": "es2017"
  },
  "include": [
    "src/client/tsconfig.json",
    "src/server/tsconfig.json"
  ]
}

src/client/tsconfig.json:

{
  "extends": "../../tsconfig",
  "include": [
    "./**/*.ts",
    "../common/**/*.ts",
    "../../typings/natives_universal.d.ts",
    "../../typings/index.d.ts"
  ]
}

服务器的 tsconfig 也是如此。

最后，这是我的 webpack 配置：

const path = require('path');

const clientConfig = {
    entry: './src/client/main.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: 'bundle_client.js',
        path: path.resolve(__dirname, 'out')
    }
};

const serverConfig = {
    entry: './src/server/main.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
        filename: 'bundle_server.js',
        path: path.resolve(__dirname, 'out')
    }
};
module.exports = [
    clientConfig, serverConfig
];

这种设置有几个优点：

1. 客户端具有客户端代码和通用代码（以及加载的任何外部内容）的代码完成功能（取决于编辑器），对于服务器也是如此。
2. 它在out 目录中创建两个包，一个用于客户端，一个用于服务器。
3. 只捆绑了必要的文件，按照正常的工作流程，客户端代码和服务器代码永远不会混合。

如果你可以这样称呼它，唯一的“缺点”是我需要一个入口点，即 main.ts，它在我的代码中导入/执行其他东西。此外，只是软性地强制客户端和服务器代码不混合。如果您导入它们，您可以混合它们，而不是在构建时无法找到其他文件。

但我很高兴在不得不违反 webpack 的情况下做出妥协。