How to Merge all bundle files into a single js in angular application using webpack?

Question

I want to understand how to merge multiple bundle.js files like main.bundle.js, scripts.bundle.js etc.(5 in number) into a single bundle.js file and make the reference in the index.html created. I am using angular-cli which uses webpack in turn.

I was able to merge the files using a separate npm module but not using webpack configuration.

Answer 1

You determine what Webpack does and how it does it with a JavaScript configuration file, webpack.config.js. Do this

entry: {
  app: 'src/app.ts',
  vendor: 'src/vendor.ts'
},

output: {
  filename: 'app.js'
}

Both app.ts and vendor.ts will be merged into app.js . If you want to keep them seperate do

entry: {
  app: 'src/app.ts',
  vendor: 'src/vendor.ts'
},

output: {
  filename: '[name].js'
}

Hope this helps.