Webpack from A to Asia: Webpack multiple entry points

Tram Ho

Webpack from A to Asia with kentrung

Today’s lesson is about managing output with multiple input files, the names of the output files will be based on the names of the entries.

1. Prepare the file

The original webpack.config.js file code

Create file src/index.js

2. Configure multiple entry points

Before we get into the problem, let’s take a look at the webpack.config.js file for the entry point segment

We see the entry is Single Entry , in fact this is just a shorthand writing of

Now create the file src/my-test.js and the code inside is as simple as this

If you want the entry point to receive the js file above, we write the key-value pair with the key of any name, value is the path to the file my-test.js

3. Configure the output

After modifying the entry, we now correct the output

  • The content above says that, with two input files, main and myTest, will be output to corresponding files, taking these two names into [name] main.js and myTest.js.
  • Rerun the webpack with npm run dev to apply the new configuration. You go to the dist folder if it is true that there are two more files main.js and myTest.js, we have successfully tested the output with multiple input entries.

4. Summary of webpack.config.js file

Note that we just output two main.js and myTest.js files, and if you want to apply it, the dist / index.html file must call it.

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