0

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.

Honza
  • 939
  • 2
  • 11
  • 28
  • What does your current webpack.config.js look like? And what WP version are you using? – Taxel Sep 03 '21 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 Sep 03 '21 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 Sep 03 '21 at 18:18
  • @Honza you can check my answer and make sure to read the *important note!* at the end. – darklightcode Sep 03 '21 at 19:11

1 Answers1

1

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

darklightcode
  • 2,738
  • 1
  • 14
  • 17