How to set up shared resources ?

[KirovAI]

Using default entries I must specify option for it and set some properties in optimization section. Example from official webpack 5 documentation:
entry: {

index: {

  import: './src/index.js',

  dependOn: 'shared',

},

another: {

  import: './src/another-module.js',

  dependOn: 'shared',

},

shared: 'lodash',

},

[webdiscus]

Hi @KirovAI,

Using the pug-plugin the entrypoint is a Pug file, not JS file.
All style as script source files must be specified directly in the Pug via link and script tags, e.g.:

html
  head
    link(href=require('./style.scss') rel='stylesheet')
    script(src=require('./main.js') defer='defer')
  body
    h1 Hello Pug!

In the main.js import all you other JS files:

import './index.js'; // <= here can be imported lodash
import './another-module.js';  // <= here can be imported lodash too
...

Don't worry, Webpack optimizes the output JS bundle without the double lodash code.
What you see in the Webpack documentation only makes sense if you create a JS library with many JS output files.
But you generate HTML pages that contain JS files, so you don't need that.

If you will optimise bundle size in the case when the same lib, e.g. lodash used in many page specifically JS files, then you should use the split chunks, see please How to config splitChunks.

Are you using "html-webpack-plugin" in your project or pug-plugin to generate HTML?

[KirovAI]

Now I have completely switched to pug