Trong bài trước chúng ta đã biết cách thiết lập Webpack để sử dụng hình ảnh trong ứng dụng của bạn thông qua url-loader. Bài hôm nay cũng tương tự như vậy nhưng lại sử dụng file-loader, nó giúp chúng ta giải quyết các vấn đề liên quan đến import – require một file, file-loader có nhiệm vụ phân tích và ouput ra trong thư mục dist.
1. Chuẩn bị file
Code file dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
Trong folder src ta để ảnh muốn import bên trong folder assets (tài nguyên) như cấu trúc bên dưới
webpack-demo
...
|- src/
| |- assets/
| |- images/
| |- img_webpack.png
|- index.js
2. Webpack file-loader
file-loader giúp chúng ta giải quyết các vấn đề liên quan đến import – require một file. Nó có nhiệm vụ phân tích và ouput ra trong thư mục dist.
Link thư viện: https://www.npmjs.com/package/file-loader
npm install file-loader --save-dev
Sau khi cài đặt xong chúng ta chỉnh sửa lại cấu hình file webpack.config.js. Các tài nguyên hình ảnh có đuôi là png | jpg | gif sẽ được load thông qua file-loader.
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
}
Code file src/index.js
import imgWebpack from './assets/images/img_webpack.png'
function createImgElement() {
const imgElement = document.createElement('img')
imgElement.src = imgWebpack
imgElement.alt = 'webpack từ A đến Á cùng kentrung'
return imgElement
}
document.getElementById('root').appendChild(createImgElement())
Ý nghĩa đoạn code trên là tạo ra một thẻ img có src là đường dẫn bức ảnh ở phần import, alt là mô tả bức ảnh. Sau khi tạo xong thì chèn ảnh này vào trong thẻ HTML có id là root.
Thế là xong phần cấu hình giờ chúng ta chạy webpack xem thế nào: npm run dev
Khi chạy xong câu lệnh chúng ta thấy trong folder dist đã tự động có thêm ảnh và file js như cấu trúc bên dưới
webpack-demo
...
|- dist/
|- 5ab50ccadbd858c94b26bfc82375d89d.png
|- index.html
|- main.js
Bây giờ chúng ta chạy file dist/index.html và xem code trong F12
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<div id="root">
<img src="5ab50ccadbd858c94b26bfc82375d89d.png" alt="webpack từ A đến Á cùng kentrung">
</div>
<script src="main.js"></script>
</body>
</html>
Ta thấy đường dẫn bức ảnh lúc này là gọi trực tiếp file ảnh nằm ngang hàng với file html.
3. Options Name
Với Option Name thì chúng ta có thể thay đổi được đường dẫn bức ảnh output. Ví dụ dưới đây chúng ta sẽ gom ảnh và để trong folder dist/images/. Cấu hình webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.(png|jpg|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
},
},
],
},
],
},
}
Khi chạy xong câu lệnh chúng ta thấy trong folder dist đã tự động có thêm ảnh như cấu trúc bên dưới
webpack-demo
...
|- dist/
|- index.html
|- main.js
|- images/
- img_webpack.png
Với Option Name thứ hai thì chúng ta có thể thay đổi được đường dẫn bức ảnh dựa theo đúng cấu trúc folder mình đã đặt trong src. Cấu hình webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
}
Khi chạy xong câu lệnh chúng ta thấy trong folder dist đã tự động có thêm ảnh như cấu trúc bên dưới
webpack-demo
...
|- dist/
|- index.html
|- main.js
|- src/
|- assets/
|- images/
|- img_webpack.png
Ngoài option này ra thì trong webpack còn nhiều các option khác hay ho lắm mà mình chưa dùng hết được.
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 các cấu hình khác cho file-loader tại: https://webpack.js.org/loaders/file-loader/
- Source code github: https://github.com/kentrung/webpack-tutorial
- Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Chuẩn bị file2. Webpack file-loader3. Options Name1. Bảo...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Chuẩn bị file2. Webpack file-loader3. Options Name1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Chuẩn bị file2. Webpack file-loader3. Options NameV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Chuẩn bị file2. Webpack file-loader3. Options NameV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Chuẩn bị file2. Webpack file-loader3. Options NameIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng...