Webpack from A to Asia: Webpack multiple file types per entry

Tram Ho

Webpack from A to Asia with kentrung

In the previous lesson, we learned how to create multiple outputs from multiple key entries, each of which is a file. Today we will learn how to import multiple files for each key entry. As an example, we are coding the homepage and this page loads two files home.js and slider.js . So we need to create a key entry that accepts these two JS files and combines them into a single JS file.

1. Prepare the file

Create src/home.js file as follows:

Create file src/slider.js

2. Configure Multiple file types per entry

The original webpack.config.js file code

We see that with the initial key entry, we only receive one input file, now for this key entry to receive many files, we need to convert it to an array of strings.

Rerun the webpack with npm run dev to apply the new configuration. The output file main.js output is a main.js of two files home and slider. Page dist/index.html we just need to call the main.js file and we are done. Open this html file and see that two logs are ok

3. Summary of webpack.config.js file

This article is over, hope with this article you have added a lot of useful knowledge. See you in the next article.

Share the news now

Source : Viblo