Nhiều Bundle Script trong Layout trong Webpack
Nếu kết quả của quá trình build tạo ra nhiều bundle, Webpack sẽ kết nối từng bundle trong số chúng. Hãy cùng kiểm tra. Giả sử chúng ta có cấu hình sau:
export default {
context: path.resolve( 'src'),
entry: {
test1: './test1.js',
test2: './test2.js'
},
output: {
filename: '[name].build.js',
path: path.resolve('dist'),
},
plugins: [
new HtmlWebpackPlugin(),
],
};
Sau khi build, cả hai bundle của chúng ta sẽ được kết nối đến file layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="test1.build.js"></script>
<script defer src="test2.build.js"></script>
</head>
<body>
</body>
</html>
Tạo ba điểm đầu vào (entry point). Thực hiện build. Kiểm tra file layout và đảm bảo rằng tất cả các bundle của bạn đã được kết nối ở đó.
