将文件合并到Webpack的条目中

Question

Background:

I have been tasked with transitioning a JS library that uses multiple build tools into one that only uses Webpack where ultimately we will refactor the code to use es6 classes.

Currently the library is over 10 years old is consists of multiple concatenated files which can interact / depend on each other (spaghetti code galore!). When combined all the chunks become one IIFE file which adds specific calls to the window object.

As it stands we have Grunt concatenating all the files together and then we run it through uglify.

The only way I have "sort" off managed to replicate what we are doing with Grunt is by using script-loader.

The problem with script-loader is that it exposes everything globally and as the library I am working on contains multiple chunks which can depend on each other, this will not suffice.

Question:

Is there a way in webpack where I can concatenate multiple files (chunks) into one?

For example:

• chunkA.js

   var varFromChunkA = "hello"; function methodFromA(){} 

• chunkB.js

   console.log(varFromChunkA); methodFromB(); 

• entry.js

   console.log(varFromChunkA + ' World'); methodFromA(); methodFromB(); 

Ultimately I would like the output from entry.js to have access to variables / methods from chunkA and B etc without having modules being required. (The entire library is split into code based namespaces, no modules at all).

So combining the chunks above I would want webpack to output something like:

var varFromChunkA = "hello";
function methodFromA(){}

console.log(varFromChunkA);
methodFromB();

/***Webpack Code***/
//Entry.js file
//I can access the objects / methods defined above
console.log(varFromChunkA +' World from inside entry.js');
/*** End of Webpack Code **/

And in the browser console when the js is loaded I would expect:

Hello

Hello World

Hello World from inside entry.js

Is this possible?

Essentially I would like the output from Webpack to include some pure JS which will be accessible by any JS file generated by weback...

Tried using script-loader and concat plugins but had no luck.

Im using Webpack 4

Answer 1

The way I have resolved it so far is by using script loader for parts of the file that need to be exposed Globally. The rest I am using a node script to concat them all together.

The combination of all files are then passed on to webpack.

Would love to do all this with just webpack but I think this is a happy compromise and means I can get rid off grunt.

Answer 2

webpack normally works in conjunction with a module importing system like es6 modules, amd or commonjs.

The thing you intend to do is another approach and not what webpack was meant to do.

So if you want to refactor the code to use es6 classes anyway, I would recommend to introduce the es6 module system as well!

This way you can use webpack naturally the way it was intended.

More information: http://exploringjs.com/es6/ch_modules.html#sec_basics-of-es6-modules

UPDATE: If you would like to concatenate the files after the webpack processing with other files, just do that with a script! You could use javascript or even bash ( cat chunkA.js chunkB.js entry.js > bundled.js )

You could even add this bash code into the scripts section of your package.json like this:

"bundle": "cat chunkA.js chunkB.js entry.js > bundled.js"

and run it with npm run bundle

Answer 3

It's been a while, but if it helps.
Following @Bynho's idea, I found a solution by using a script node " concat " associated directly in the configuration with a promise...
I use here 3 config files as suggested in doc to adapt to your needs.
I find this practice useful because it allows to automate it without having to too work on this, after all.

(webpack 4.)
In the file "webpack.common.js"

module.exports = {
    entry: {
        app: './src/concatened.js',
    },
... config
}

In the file "webpack.dev.js"

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const concat = require('concat');

const result = concat(['./src/utils.js', './src/index.js'],
        './src/concatened.js')
    .then(result => merge(common, {
        mode: 'development',
        ... config
    }));

module.exports = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(result);
            reject((err) => console.log(err));
        }, 10);
    });
};