CODEWITHSUNDEEP
javascriptwebpack
Honza
Honza

Reputation: 1008

Webpack: build app from multiple directories

I have following app tree:

For explanation: current application was developed using webpack and directory js. Now, I need to (slowly - page by page) transform current state into another one, so I would like to separate it. I have created directory ui in where I will develop new app UI. But this change unfortunately cannot be done as new and complete UI, but it will be transformed page by page, so I need to process both directories ui and js by one webpack.

I would like to call: npm run webpack from the directory js and I need that webpack will compile all scripts from the directories js and ui. Is it possible some way? What I should "say" to webpack? What configuration should be done in webpack.config.js to make it work?

I hope I've explained it well. Thank you very much in advance.

Upvotes: 0

Views: 760

Answers (1)

darklightcode
darklightcode

Reputation: 2772

You can change in webpack.config.js the entry property will point to your main files, after that, webpack will serve both of them :

webpack.config.js:

module.exports = {
  entry: {
    app: './path/to/js/folder/app.js',
    ui: './path/to/ui/folder/ui.js',
  },
  output: {
    // [name] will output as the key of the entry point 
    // e.g. app.bundle.js and ui.bundle.js
    // webpack dev server will include them by default in html
    filename: '[name].bundle.js', 
  },
  ...
};

app.js:

console.log('main js logic')

ui.js:

console.log('extend logic');

Important note!

Sometimes the order of which the scripts that are loaded matter, if webpack outputs them in a order you don't like or doesn't work for you check out this topic for the issue itself:

Webpack bundles my files in the wrong order

Upvotes: 1

Related Questions