frontend-webpack-boilerplate

frontend-webpack-boilerplate copied to clipboard

Want to know how can I get multiple javascript files as output & as well as multiple sass files?

for example here is a dummy layout of the directory: src/ ├─ scss/ │ ├─ pages/ │ │ ├─ home.scss │ │ ├─ about.scss │ ├─ main.scss ├─ js/ │ ├─ pages/ │ │ ├─ home.js │ │ ├─ about.js │ ├─ main.js

So the expected output would be main, home & about CSS files and the same goes for javascript main, home & about js files.

Want to know how can I get multiple javascript files as output & as well as multiple sass files?

for example here is a dummy layout of the directory: src/ ├─ scss/ │ ├─ pages/ │ │ ├─ home.scss │ │ ├─ about.scss │ ├─ main.scss ├─ js/ │ ├─ pages/ │ │ ├─ home.js │ │ ├─ about.js │ ├─ main.js

So the expected output would be main, home & about CSS files and the same goes for javascript main, home & about js files.

So I was able to pull this off using multiple entries

entry: {
    app: [
      `${path.resolve(environment.paths.source, 'js', 'app.js')}`,
      `${path.resolve(environment.paths.source, 'scss', 'app.scss')}`,
    ],
    demo: [
      `${path.resolve(environment.paths.source, 'js', 'demo.js')}`,
      `${path.resolve(environment.paths.source, 'scss', 'demo.scss')}`,
    ],
  },

but I don't want all HTML's to have all JS & CSS files only specific JS & CSS in the name specific HTML file. For e.g about.js & about.scss should be in only about.html

Were you able to come up with a solution for this scenario?

Our team has a similar use case where we want to build component like pages so we're exporting assets (css and js) for individual components.

For example a "page" that just contains one component like a button, marquee, or something larger like a carousel.

These can then be imported into other systems.

For anyone else coming across this scenario, you can use 'chunks'.

Firstly you need to declare all of your JS files in entry. Make sure to label the entryChunkName the same as your .html file. e.g about.html and about: path.resolve(environment.paths.source, 'js', 'about.js')

Then in the HTMLWebpackPlugin options, pass the name of the JS file in an array like below:

const htmlPluginEntries = templateFiles.map((template) => new HTMLWebpackPlugin({
  inject: true,
  hash: false,
  chunks: [template.replace('.html', '')], // match html file name with JS entry name
  filename: template,
  template: path.resolve(environment.paths.source, template),
}));

Note: this is a loop, so we can use the template var (which will be your html file name and ext) and just remove the .html.

If you have imported your SCSS into your JS that will get generated too.

You can also pass separate global JS files in the chunks array as long as they are declared in entry.