Webpack: build app from multiple directories

Question

I have following app tree:

my_app
- src
  - js
    - dir_1_with_js
    - ...
    - dir_n_with_js
    - package.json
    - webpack.config.js
    - script_1.js
    - ...
    - script_n.js
  - ui
    - ui_dir_1_with_js
    - ...
    - ui_dir_n_with_js
    - ui_script_1.js
    - ...
    - ui_script_n.js

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.

What does your current webpack.config.js look like? And what WP version are you using? — Taxel
– Taxel, Commented Sep 3, 2021 at 12:59
You should share your webpack.config.js. Based on what you wrote, you should have an entry object in config with 2 bundles, one for js and one for ui. Usually these bundles point to a main file main.js*/*index.js and those files imports/requires all the necessary stuff, webpack will load them if paths are accessible in dev/prod mode. — darklightcode
– darklightcode, Commented Sep 3, 2021 at 13:11
You are right, I am quite newbie to webpack. There are some entry points and it should not be any problem to pass path like '../ui/main.js'. Now I feel very foolish. Thank you @darklightcode, if you make an answer from your comment, I can mark it as a solution. New entry point for ui target, how simple is it. — Honza
– Honza, Commented Sep 3, 2021 at 18:18
@Honza you can check my answer and make sure to read the important note! at the end. — darklightcode
– darklightcode, Commented Sep 3, 2021 at 19:11

darklightcode · Accepted Answer · 2021-09-03 19:10:11Z

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

Collectives™ on Stack Overflow

Webpack: build app from multiple directories

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related