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:
1 2 | console.log('home.js') |
Create file src/slider.js
1 2 | console.log('slider.js') |
2. Configure Multiple file types per entry
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> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 punctuation">{</span> main <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./src/home.js'</span> <span class="token punctuation">,</span> <span class="token string">'./src/slider.js'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</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">'[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> <span class="token punctuation">}</span> |
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
1 2 3 | home.js slider.js |
3. Summary of webpack.config.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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 punctuation">{</span> main <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./src/home.js'</span> <span class="token punctuation">,</span> <span class="token string">'./src/slider.js'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</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">'[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> <span class="token punctuation">}</span> |
This article is over, hope with this article you have added a lot of useful knowledge. See you in the next article.
- Read more about the Multiple file types per entry mode at: https://webpack.js.org/guides/entry-advanced/#multiple-file-types-per-entry
- Sourcode github: https://github.com/kentrung/webpack-tutorial