Webpack: How do I bundle multiple javascript files into a single output file?

javascript webpack bundling-and-minification
Rish picture Rish · Jul 14, 2017 · Viewed 14.5k times · Source

Suppose I have two files, main.js and app.js; how do I use Webpack to bundle both of them into one file: bundle.js?

Answer

c0l3 picture c0l3 · Jul 14, 2017

create one entry.js which is your webpack entry file and in this your require your additional files

webpack.config.js

module.exports = {
   entry: './src/entry.js'
   ...
};

/src/entry.js

// new syntax
import './main.js';
import './app.js';

// or old syntax
require('./main.js');
require('./app.js');

if these two files depend on each other, it would be be beneficial to reflect this in your dependency tree and require main.js in your app.js and not in entry.js for example

Related questions

Exclude module from webpack minification

We are using WebPack in a single page application. The application is deployed to many environments. We have a requirement where the application needs to call a specific endpoint in a given environment. In order to provide the endpoint address …

Read More
Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture Here my files architecture: components file1.jsx file2.jsx file3.jsx container img …

Read More