Chỉ cần nhìn vào hình ảnh ở trên, bạn có thể hình dung ra kịch bản mà tôi sắp nói đến: sử dụng đa file đầu vào và đa file đầu ra trong Webpack. Như trong bài viết "Hướng dẫn sử dụng Webpack cơ bản" chúng ta đã được biết đến khái niệm entry point (file đầu vào) và output (file kết quả đầu ra), tuy nhiên trong bài viết này chúng ta chỉ có một ví dụ với một file đầu vào và một file đầu ra. ## Vấn đề thiết kế website đa trang
Thiết kế ứng dụng web đơn trang (Single page app) đang rất thịnh hành hiện nay, tất cả website chỉ là một trang và thực hiện toàn bộ các nội dung trên đó. Việc thiết kế này cho thấy nhiều ưu điểm như tốc độ tải, nâng cao trải nghiệm người dùng... Tuy nhiên, thực tế chúng ta cũng không thể bỏ hẳn thiết kế website đa trang ví dụ như khi tách biệt phần backend và fontend trong một hệ thống website. Khi đó, phần fontend và backend sẽ có các giao diện cũng như phải sử dụng các gói thư viện Javascript và CSS khác nhau. Webpack hoàn toàn hỗ trợ việc này, trong hình ảnh ở trên, chúng ta hoàn toàn có thể có nhiều entry đầu vào là nơi các phần ứng dụng bắt đầu và có nhiều file kết quả đầu ra khi Webpack xử lý, ví dụ fontend sẽ sử dụng file output_1.js và backend sẽ sử dụng file output_2.js...
Ví dụ về thiết lập cấu hình multiple entry và output trong Webpack
Tạo một thư mục webpack-demo-2
c:\>mkdir webpack-demo-2 && cd webpack-demo-2
c:\webpack-demo-2>Tiếp đó, tạo ra file package.json lưu cấu hình cho npm
c:\webpack-demo-2>npm init -y
Wrote to c:\webpack-demo-2\package.json:
{
"name": "webpack-demo-2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}Chúng ta tạo ra thư mục app trong đó và tạo hai file fontend.js và backend.js như sau: fontend.js
import _ from 'lodash';
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
alert('Hello, this is fontend page');và nội dung file backend như sau:
import Vue from 'vue';
var myModel = {
name: "All Laravel",
url: "https://allaravel.com",
author: "Kiên Đặng"
};
var myapp = new Vue({
el: '#app',
data: myModel
});Fontend sẽ sử dụng gói lodash và backend sẽ sử dụng gói Vue.js, do đó chúng ta cần cài đặt hai gói này:
c:\webpack-demo-2>npm install --save lodash
webpack-demo-2@1.0.0 c:\webpack-demo-2
`-- lodash@4.17.4
c:\webpack-demo-2>npm install --save vue
webpack-demo-2@1.0.0 c:\webpack-demo-2
`-- vue@2.3.2Tiếp theo chúng ta tạo ra hai trang html là fontend.html và backend.html với nội dung như sau:
<!-- Nội dung file fontend -->
<html>
<head>
<title>fontend</title>
</head>
<body>
<script src="dist/bundle1.js"></script>
</body>
</html>Và nội dung file backend.html như sau:
<!-- Nội dung file backend -->
<html>
<head>
<title>backend</title>
</head>
<body>
<div id="app">
<a v-bin:href="url">{{ name }}</a> là website do <b>{{ author }}</b> phát triển.
</div>
<script src="dist/bundle2.js"></script>
</body>
</html>Tiếp theo tạo file webpack.config.js để thiết lập cho Webpack xử lý hai hai đầu vào và tạo ra hai file đầu ra là fontend.js và backend.js
var path = require('path');
module.exports = {
entry: {
bundle1: "./app/fontend.js",
bundle2: "./app/backend.js"
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js"
}
};CÁC BÀI VIẾT KHÁC
0 Bình luận trong "Đóng gói Webpack với nhiều file đầu vào và nhiều file kết quả"