Bài hôm nay chúng ta tìm hiểu về quản lí output với nhiều file đầu vào entry, tên của các file output sẽ dựa vào tên của các entry.
1. Chuẩn bị file
Code file webpack.config.js ban đầu
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> |
Tạo 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. Cấu hình multiple entry point
Trước khi tìm hiểu vấn đề chúng ta ngó lại một chút file webpack.config.js chỗ đoạn entry point
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> |
Ta thấy entry đang là Single Entry, thực ra đây chỉ là kiểu viết shorthand của
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> |
Bây giờ các bạn tạo thêm file src/my-test.js và code bên trong đơn giản thế này
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> |
Nếu muốn entry point nhận file js ở trên ta viết thêm cặp key-value với key là tên nào cũng được, value là đường dẫn tới 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. Cấu hình output
Sau khi sửa lại entry, giờ ta sửa tiếp 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> |
- Nội dung trên cho biết, với hai file đầu vào entry là main và myTest sẽ được output ra các file với tên tương ứng, lấy hai tên này đổ vào [name] là main.js và myTest.js
- Chạy lại webpack với
npm run devđể áp dụng cấu hình mới. Bạn vào folder dist nếu thấy đúng là có thêm hai file main.js và myTest.js thì chúng ta đã test thành công output với nhiều đầu vào entry.
4. Tổng kết file webpack.config.js
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') } } |
Lưu ý là chúng ta mới chỉ output ra hai file main.js và myTest.js còn các bạn muốn áp dụng nó vào thì file dist/index.html thì phải gọi nó vào nhé.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.
- Tham khảo thêm về chế độ output with multiple entry points tại: https://webpack.js.org/concepts/output/#multiple-entry-points
- Source code github: https://github.com/kentrung/webpack-tutorial