Javascript 创建两个没有入口点的捆绑包的Web包

我有以下源设置：

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

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

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

• bundle_client.js
• bundle_server.js

每个包都包含相应的代码（typescript transpiled，JS只是通过，但是typescript transpiler可以使用

allowJs

），以及包含来自common的代码的两个包

这是很容易与吞咽，但我想迁移到网页包，我不能想出它

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

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将所有文件作为入口点

---

读了更多，我突然想起您可以在项目结构的子目录中包含child

tsconfig.json

文件。另外，webpack非常非常想要一个入口点，所以我做出了妥协，找到了一个非常优雅的解决方案

我在客户端和服务器目录中添加了

main.ts

，以及

tsconfig.json

。main（入口点）导入其余部分（以便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"
  ]
}

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

src/client/tsconfig.json

：

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

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

服务器的tsconfig也是如此

最后，这是我的网页配置：

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
];

此设置有几个优点：

客户机对客户机代码和公共代码（以及加载的任何外部内容）有代码完成（取决于编辑器），对服务器也有代码完成

它在

out

目录中创建两个bundle，一个用于客户端，一个用于服务器

只有必要的文件被捆绑，并且按照正常的工作流程，客户端代码和服务器代码永远不会混合

如果可以这么说，唯一的“缺点”是我需要一个入口点，即main.ts，它在我的代码中导入/执行其他内容。此外，客户端和服务器代码不会混合，这只是软强制的。如果导入它们，可以将它们混合，而不是在构建时无法定位其他文件

---

但我很高兴在违反webpack的问题上做出妥协。

这里到底有什么问题？在中，当您运行Webpack时会发生什么？您必须有一个入口点。你以前用gulp做的不一定用webpack做。创建两个配置，每个入口点一个，或者一个配置有两个不同的入口点，这样就可以了。@KirkLarkin生成的包是空的，它们只包含index.js的内容，因为我将其标记为入口点，一个空文件。我希望其他文件也在捆绑包中。@PlayMa256如果我没有任何静态文件可以用作入口点怎么办？它们都是动态的，没有“主文件”。如果你没有，webpack不是适合你的工具，不幸的是，坚持使用gulp。