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
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'path'</span> <span class="token punctuation">)</span> module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">,</span> output <span class="token operator">:</span> <span class="token punctuation">{</span> filename <span class="token operator">:</span> <span class="token string">'main.js'</span> <span class="token punctuation">,</span> path <span class="token operator">:</span> path <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> __dirname <span class="token punctuation">,</span> <span class="token string">'dist'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Create file src/index.js
1 2 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Hello World!'</span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 | module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">}</span> |
We see the entry is Single Entry , in fact this is just a shorthand writing of
1 2 3 4 | entry <span class="token operator">:</span> <span class="token punctuation">{</span> main <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">}</span> |
Now create the file src/my-test.js and the code inside is as simple as this
1 2 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'kentrung test'</span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 | entry <span class="token operator">:</span> <span class="token punctuation">{</span> main <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">,</span> myTest <span class="token operator">:</span> <span class="token string">'./src/my-test.js'</span> <span class="token punctuation">}</span> |
3. Configure the output
After modifying the entry, we now correct the output
1 2 3 4 5 | output <span class="token operator">:</span> <span class="token punctuation">{</span> filename <span class="token operator">:</span> <span class="token string">'[name].js'</span> <span class="token punctuation">,</span> path <span class="token operator">:</span> path <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> __dirname <span class="token punctuation">,</span> <span class="token string">'dist'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
- 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 devto 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
1 2 3 4 5 6 7 8 9 10 11 12 13 | const path = require('path') module.exports = { entry: { main: './src/index.js', myTest: './src/my-test.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } } |
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.
- For more information about output mode with multiple entry points at: https://webpack.js.org/concepts/output/#multiple-entry-points
- Source code github: https://github.com/kentrung/webpack-tutorial