CODEWITHSUNDEEP
javascriptangularjswebpackdevelopment-environmentwebpack-4
yevg
yevg

Reputation: 1966

Webpack configuration to concatenate JS

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.

Upvotes: 0

Views: 2163

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

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!

Upvotes: 1

Related Questions