Question

我具有以下源设置：

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

源文件中可以同时包含打字稿和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,
];

在Google周围搜索时，我发现了一些应该有所帮助的事情：

导出多个配置可让我创建单独的捆绑软件
我可以使用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
];

此设置具有以下优点：

客户端具有客户端代码和通用代码（以及加载的外部内容）的代码完成（取决于编辑器），服务器具有相同的代码。
它将在out目录中创建两个捆绑包，一个捆绑包用于客户端，一个捆绑包用于服务器。
仅捆绑必要的文件，并且按照正常的工作流程，客户端代码和服务器代码将永远不会混合。

如果可以这样称呼，唯一的“缺点”是我需要一个入口点，即main.ts，它可以在我的代码中导入/执行其他操作。此外，仅轻柔地强制客户端和服务器代码不混淆。如果导入它们，则可以混合它们，而不是在构建时找不到其他文件。

但是我很高兴在不得不违反Webpack的情况下做出这种妥协。

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

1 个答案: