Xin chào mọi người! Trong bài viết này, tôi sẽ giới thiệu về một số kiến thức liên quan đến Webpack.
1) Webpack là gì?
- Webpack là một công cụ giúp biên dịch các module JavaScript. Nó còn được gọi là “module bundler”.
2) Ưu điểm của Webpack
Dưới đây là một số ưu điểm khi sử dụng Webpack:
Bạn đang xem: Tìm hiểu về webpack
- Giúp dễ dàng phát triển, quản lý và tùy chỉnh project.
- Tăng tốc độ thực thi của project.
- Cho phép phân chia các module và chỉ load khi cần sử dụng.
- Biên dịch tất cả các file nguồn thành một file duy nhất, nhờ vào loader có thể biên dịch các loại file khác nhau.
- Biến các tài nguyên tĩnh như hình ảnh và css thành module.
- Chuyển đổi các nguồn mã: JSX, Less, Sass, SCSS thành JavaScript, ES6 sang ES5 thông qua babel transpiler…
3) Cài đặt Webpack
- Bước 1: Khởi tạo package.json
npm init
Sau khi chạy xong, bạn sẽ có một file package.json trong thư mục.
- Bước 2: Cài đặt Webpack toàn cục
Để sử dụng Webpack ở bất kỳ đâu, bạn cần cài đặt toàn cục.
npm install -g webpack
- Bước 3: Cài đặt Webpack cho một project cụ thể
Trong thư mục của project, chạy lệnh sau:
npm install -save-dev webpack
Xem thêm : Công nghệ game engine là gì? Cách thức hoạt động của game engine
Sau khi hoàn thành, file package.json sẽ được cập nhật.
- Bước 4: Khởi tạo file webpack.config.js để cấu hình Webpack
const path = require(‘path’);
const config = {
entry : ‘./src/index.js’,
output : {
filename : ‘bundle.js’,
path : path.resolve(__dirname, ‘build’)
}
}
module.exports = config;
entry: File webpack sẽ bắt đầu làm việc và nạp các file để thực hiện việc bundling. Nó sẽ import module từ file này và từ đó import module từ các file khác.
output: Chỉ định nơi lưu trữ file sau khi được biên dịch.
- Bước 5: Chạy lệnh webpack để bundle file output.
4) Module trong Webpack
Bây giờ chúng ta đã có entry và output, tiếp theo là module. Trong Webpack, module được chia thành 3 phần nhỏ:
- preLoaders: Các xử lý được nạp trước khi bắt đầu với các loader. Thường thì trong preLoader, các dev sẽ kiểm tra cú pháp với JSHint hoặc ESLint. Thông thường, chế độ này được thiết lập trên môi trường webpack-dev-server.
- loaders: Được sử dụng để compile các ngôn ngữ khác nhau. Cho phép xử lý các file trước khi require hoặc load vào. Giúp chuyển đổi các file từ nhiều ngôn ngữ khác nhau sang JavaScript thuần (JSX, ES6, ES7…, CSS – require 1 file CSS trong JavaScript).
- postLoaders: Các xử lý sau cùng sẽ được thực hiện thông qua phần này.
Từ phiên bản v2.1-beta.23 trở đi, loaders đã được đổi tên thành rules và preLoaders/postLoaders được xác định thông qua thuộc tính enforce nếu loaders là preLoaders hoặc postLoaders.
rules: [
/*loader css*/
{
test: /.css$/,
exclude: /node_module/,
loader: ‘style-loader!css-loader’
},
/*loader babel transform es6 –> es5*/
{
test: /.js$/,
exclude: /node_module/,
loader: ‘babel-loader’,
enforce: “pre”,
enforce: “post”,
options: {
presets: [“es2015”]
},
query: {
cacheDirectory: true,
presets: [‘es2015’]
}
}
]
Xem thêm : Bò 3B là giống bò gì?
Trong đó:
- test: giá trị là chuỗi regex so khớp với định dạng file, khi đoạn mã đi qua test, nó sẽ nạp các file đó để chuẩn bị cho quá trình xử lý.
- exclude: giá trị là chuỗi regex so khớp với định dạng file, khi đoạn mã đi qua exclude, nó sẽ bỏ qua các file đó (thường là thư mục node_module).
- loader: phần này rất quan trọng, đó là các loader module mà bạn đã cài đặt từ npm. Ví dụ trên, tôi đã sử dụng các loader module là style-loader, css-loader và babel-loader. Loader module sẽ phân tích chuỗi trong mảng, và có thể thêm các query-string sau đó. Ví dụ, dòng mã loader css có thể viết là loader: [‘style-loader’, ‘css-loader’], và dòng mã loader babel-loader có thể viết là: loader: ‘babel-loader?optional=runtime,cacheDirectory=true,presets: [‘es2015’].
5) Plugin trong Webpack
Plugin cũng tương tự như Loader, nhưng nó có thể làm nhiều công việc hơn và là một phần quan trọng trong Webpack. Một số plugin phổ biến bao gồm UglifyJSPlugin, webpackDashboard, webpackBundleAnalyzer,…
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);
const HTMLWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
plugins: [
new UglifyJsPlugin({
sourceMap: true,
output: {
comments: false,
beautify: false
}
}),
new HTMLWebpackPlugin({
title: ‘Code Splitting’
}),
new webpack.optimize.CommonsChunkPlugin({
name: ‘common’
})
]
}
6) Chế độ (mode) trong Webpack
- Chế độ (mode) giúp cấu hình môi trường để tăng tốc độ triển khai và giảm thời gian chờ không cần thiết. Webpack giới thiệu 2 chế độ: development và production.
- Bao gồm:
- development
- production
- Cấu hình mode trong Webpack như sau:
module.exports = {
mode: ‘development’
}
Chế độ development cho phép xây dựng nhanh, không tối ưu hóa mã, không loại bỏ các comment trong mã, cung cấp thông tin lỗi và gợi ý tốt hơn trong quá trình debug.
Ngược lại, chế độ production chậm hơn, nhưng tạo ra mã được tối ưu hóa tốt hơn, làm cho file JavaScript đầu ra có kích thước nhỏ hơn.
7) Thiết lập các script Webpack
Để cấu hình các script Webpack, bạn chỉ cần mở file package.json và sửa như sau:
- Chạy Webpack
“scripts”: {
“build”: “webpack”
}
- Xem thay đổi và cập nhật
“scripts”: {
“watch”: “webpack -watch”
}
Kết luận
- Webpack là một công cụ rất hữu ích. Hiểu rõ về Webpack sẽ giúp chúng ta thực hiện công việc lập trình dễ dàng hơn, tối ưu hóa project và quản lý dự án một cách tốt hơn.
- Cảm ơn mọi người đã theo dõi!
Nguồn tham khảo:
