javascript - Merge files into entry for Webpack - Stack Overflow

admin管理员组

文章数量:1026381

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 bined all the chunks bee 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 bining 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

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 bined all the chunks bee 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 bining 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

• javascript
• webpack
• gruntjs
• uglifyjs

Share Improve this question Follow edited Apr 12, 2018 at 14:05 RobC 25.1k2121 gold badges8484 silver badges8686 bronze badges asked Apr 1, 2018 at 13:54 BynhoBynho 69277 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 bination 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 promise and means I can get rid off grunt.

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

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 remend to introduce the es6 module system as well!

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

More information: http://exploringjs./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

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.mon.js"

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

In the file "webpack.dev.js"

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

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

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

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 bined all the chunks bee 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 bining 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

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 bined all the chunks bee 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 bining 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

• javascript
• webpack
• gruntjs
• uglifyjs

Share Improve this question Follow edited Apr 12, 2018 at 14:05 RobC 25.1k2121 gold badges8484 silver badges8686 bronze badges asked Apr 1, 2018 at 13:54 BynhoBynho 69277 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 bination 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 promise and means I can get rid off grunt.

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

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 remend to introduce the es6 module system as well!

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

More information: http://exploringjs./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

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.mon.js"

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

In the file "webpack.dev.js"

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

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

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

本文标签： javascriptMerge files into entry for WebpackStack Overflow