Hỏi nhanh đáp gọn về webpack

Bài viết được sự cho phép của tác giả Lưu Bình An

🐸 Những module pattern nào webpack hỗ trợ?

common.js và es6

🐸 Có được phép có nhiều entry point trong cùng 1 file config?*

Có

🐸 Làm sao để tạo file config webpack tự động?

webpack-cli init

🐸 Loader trong webpack là gì?

transform những module nào không phải là JS vào trong bundle

🐸 Loader chạy sync hay async

Cả hai

🐸 Khác nhau giữa loader và plugin

Loader dùng để pre-processing, plugin phức tạp hơn và nó can thiệp nhiều vào quá trình compile.

🐸 Làm sao để tách một số data ra khỏi bundle thành một file riêng biệt, ví dụ như file css

Sử dụng ExtractTextWebpackPlugin. Tất cả css sẽ không còn nằm inline trong file JS bundle, nó sẽ là một file riêng (style.css chẳng hạn)

🐸 Hot module replacement là gì?

Tính năng cho phép cập nhập module mà không cần reload

🐸 parallel-webpack là gì và nó ảnh hưởng thế nào đến quá trình build

parallel-webpack sẽ giúp config với nhiều entry point, cho phép webpack build parallel, nâng cao tốc độ build

🐸 Mô tả một cách ngắn gọn long-term caching và làm sao sử dụng nó trong webpack?

Browser sẽ cache static file bên dưới local để cải thiện tốc độ load, để đảm bảo nếu có bản build mới, trình duyệt biết và download file mới, tên file thường được đặt như sau

app.js?build=1
app.js?build=2

// hoặc
app.js.2a6c1fee4b5b0d2c9285.js
app.js.70b594fe8b07bcedaa98.js

Để làm việc này, trong webpack chúng ta đặt config

module.exports = {
    ...
    output: {
     filename: "[name].[hash].js"
    }
    ...
}

🐸 Khác nhau giữa hash và chunkhash?

[hash] tạo ra một id ngẫu nhiên cho từng lần build và sử dụng cho tất cả chunk. Nếu thay [hash] bằng [chunkhash] nó sẽ tạo ra mỗi chunk một id ngẫu nhiên.

🐸 Mô tả CommonsChunk Plugin?

Là một tính năng có sẵn của webpack, cho phép tạo file riêng (gọi là chunk) cho những module dùng chung. Hỗ trợ caching và nâng cao tốc độ load

🐸Diễn giải đoạn code bên dưới

new webpack.ContextReplacementPlugin(
     /moment[\/\\]locale/,
     /(en-gb|en-us)\.js/
)

Báo với webpack, chỉ include những file có tên khớp với điều kiện /(en-gb|en-us)\.js/, trong đường dẫn /moment[\/\\]locale/ khi bundle

🐸 Làm sao để remove những css selector không dùng đến?

Dùng plugin purifycss-webpack

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

• Vue.js: Những điểm tốt, điểm xấu và điểm “tạm chấp nhận được”
• Ghi chú về 3 module bundler rollup, parcel, webpack
• Webpack là gì? Hướng dẫn webpack 4: tất cả những gì bạn cần biết từ 0 đến khi ra sản phẩm

Xem thêm Việc làm Developer hấp dẫn trên TopDev