Webpack modules distribution along output files

问题

I'm new to Webpack and Babel, but I think I've quite understood how to use them, even though, there is still one thing I haven't been able to solve.

Here is the problem... Essentially, I have 3 javascript files:

• setup.js
• loader.js
• main.js

setup.js is the only file linked to my html pages, it contains a lightweight script which dynamically inserts some needed resources, including loader.js

loader.js is a bit heavier, and is responsible of downloading and inserting all the remaining resources, based on some logic, finally including main.js, which contains the rest of my code.

So the insertion order is: setup.js -> loader.js -> main.js

I'm using babel-loader inside Webpack to transpile and polyfill those 3 files (using @babel/preset-env and core-js 3.0.0)

The thing is that, obviously, I don't want duplicate code along those file, nor want I to add more files to the structure specified above.

I'm currently feeding the 3 files to Webpack as an entry object with the following configuration:

(NOTE: I generate the Webpack configuration dynamically, but for this case, the resulting simplified object, would be as follows.)

{
    entry: {
        setup: 'path/to/setup.js',
        loader: 'path/to/loader.js',
        main: 'path/to/main.js',
    },
    mode: 'development',
    output: {
        filename: '[name].js',
        path: 'output/path'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: {
                                        version: '3.0.0',
                                        proposals: false
                                    }
                                }
                            ]
                        ],
                        configFile: false,
                        babelrc: false
                    }
                }
            }
        ]
    },
    watch: false,
    node: false,
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 0
        }
    }
}

With this configuration I've managed to effectively avoid duplicates, which is an improvement respect to the default configuration (without the custom optimization, each file gets its required modules even if they are also included in the other files), but I'm getting the modules in separate files:

What I really want is:

setup.js to get transpiled and polyfilled, then loader.js BUT ignoring modules already inserted in setup.js and finally main.js BUT again ignoring modules inserted in the first two files. Each file containing the corresponding modules (and not in separate files)

My last options:

Option 1: Note from the image that if vendors~... files were re-merged to the starting files following the insertion order specified above, with a require-first policy, it would generate the intended output. (I don't know if those files can be brutally merged without further considerations).

Option 2: I was thinking to separate Babel from Webpack... Use Babel to add all the require statements in each file separately. Then read files and remove repeated require statements in order. Then, pass the files to Webpack independently. But I'm really hoping that there is a simpler alternative! (This option would apparently make the deal, but it would be impossible to optimize module dependencies distribution (different modules could have common dependencies that would be repeated (?)), but I think it would be acceptable (?))

I would appreciate any solution, suggestion or advice.

Thank you very much for your time!

回答1:

After days of deeply studying Webpack's source code, I've concluded that there is no way to achieve this by using only Webpack's included functionalities, so I wrote a plugin that fully addresses my needs.

You can find it HERE. Just in case it may result useful for someone in the future.

来源：https://stackoverflow.com/questions/55539634/webpack-modules-distribution-along-output-files