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

Question

I have the following source setup:

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

Both typescript and javascript files can exist in the sources. However, there is no entrypoint (no 'main file').

My goal is that I get two bundles:

• bundle_client.js
• bundle_server.js

Each bundle contains their appropriate code (typescript transpiled, and JS just passing through however the typescript transpiler can do that using allowJs ), as well as both bundles containing the code from common.

This was easy with gulp, but I want to migrate to webpack and I can't figure it out.

This is the broken config I currently have:

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

Googling around I found a couple of things that should help:

• Exporting multiple configs allows me to create separate bundles
• I can use blob to put all files as entry point

Answer 1

Reading up some more, I suddenly remembered you can have child tsconfig.json files in subdirectories of your project structure. Also it was made clear that webpack really, really wants an entry point, so I made a compromise, and found a quite elegant solution.

I added a main.ts to both client and server directories, as well as a tsconfig.json . The main (entry point), imports the rest (so webpack can create its dependency graph) and I have 3 tsconfig.json files.

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"
  ]
}

And the same for server's tsconfig.

And finally, this is my webpack config:

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

This setup has several advantages:

1. Client has code completion (depending on editor) for client code and common code (and whatever external stuff is loaded), and same for server.
2. It creates two bundles in the out directory, one for client and one for server.
3. Only the necessary files are bundled, and following a normal workflow, client code and server code will never mix.

The only "downside" if you can call it that, is that I need an entry point, being main.ts which imports/executes other things throughout my code. Additionally, it is only softly enforced that client and server code doesn't get mixed. You can mix them, if you import them, as opposed to just not being able to locate the other's files when building.

But I am glad to make that compromise over having to violate webpack.