Webpack configuration to concatenate JS

Question

Im using webpack 4 to bundle my dependencies (in this case AngularJS) like so:

index.js

require('angular');
require('angular-ui-router');
// ...

webpack.config.js

const path = require('path');

module.exports = {

  mode: "development",
  entry: "./build/index.js",
  output: {
      path: __dirname + '/public/js',
      filename: "bundle.js"
  }
}

This generates a bundle.js file containing all my dependencies.

I would additionally like to use it as a task runner to concatenate the Angular JS files from /build/js into a single file (lets call it app.js) thats placed into /public/js

Ideally, I would like the representation of the concatenated angular files (what would be in app.js) to be included within bundle.js along with my dependencies - though Im not sure if this is possible or best-practice.

this was helpful, thank you! is there a way to select all files in a given directory as an entry point entry: { a: [ "./build/index.js", "./build/app/js/*" ] } — yevg
– yevg, Commented Jan 15, 2019 at 17:18
Would you not just point it at a file that required all the files you want - for example we have a components folder and we point the entry at an index.js which then requires all the files in that directory (but not sure if that's what you're meant to do as I'm quite new to webpack myself!) — Pete
– Pete, Commented Jan 15, 2019 at 17:20
yes, thats definitely an option but index.js would need to be updated everytime a new file is added or removed. I was hoping for a more hand-off solution where I can add/remove files and have webpack deal with it — yevg
– yevg, Commented Jan 15, 2019 at 17:25
Yeah, it is a bit of a pain! I'll see if someone comes up with something else as I would also like to see if there is a better option :) — Pete
– Pete, Commented Jan 15, 2019 at 17:26

Derek Nguyen · Accepted Answer · 2019-01-16 16:11:18Z

1

As @Pete has pointed out in the comment, webpack input accepts an array of entry paths. Webpack itself doesn't take glob pattern, but you can use the glob package to do so (if you use webpack, it's likely that you've already installed it, otherwise get it here):

const glob = require('glob');

module.exports = {
  mode: 'development',
  entry: glob.sync('./src/**/*.js'), // ['./src/a.js', './src/dir/b.js']

  ...
}

Hope it helps!

answered Jan 16, 2019 at 16:11

Derek Nguyen

11.5k1 gold badge44 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack configuration to concatenate JS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related