Nội dung bài viết

Video học lập trình mỗi ngày

Trước khi chúng ta tìm hiểu về "webpack là gì?" thì tôi cũng xin phép nói rõ một số khía cạnh mà tôi đã nhìn thấy. Trước tiên khi bắt đầu bài viết này, thì có một cậu sinh viên năm 4 đã hỏi tôi về việc config webpack như thế nào? Thì tôi cũng định dùng kỹ năng seach của mình tìm cho Cu Cậu, nhưng qua những web hướng dẫn tôi thấy là hầu như viết một cách khó hiểu hoặc dịch ở đâu đó ra. Không thể áo dụng cho người mới bắt đầu được, chính vì vậy bài viết này sẽ hỗ trợ cho bạn hiểu từng bước cách config webpack cho người mới bắt đầu và vì sao năm 2020 chúng ta lại sử dụng webpack một cách phổ biến.

Webpack là gì?

Webpack là một module bundler cho phép bạn viết bất kỳ định dạng module nào (cũng có thể kết hợp), sau đó biên dịch cho trình duyệt. Webpack phân tách mã dựa trên cách nó được sử dụng trong ứng dụng của bạn và với phân tích trách nhiệm theo module này, việc quản lý, gỡ lỗi, xác minh và kiểm tra mã của bạn trở nên dễ dàng hơn nhiều.

Trở lại với thực tế chúng ta chỉ có thể sử dụng JavaScript trong các tệp HTML để giới thiệu script thông qua các thẻ như ví dụ dưới đây.

<script src="./index.js"></script>

<script>
	console.log('Hello World');
</script>

Nếu nó chỉ được sử dụng theo cách này, thì vấn đề là gì? Không có cách nào để giới thiệu một lượng lớn JavaScript theo cách này. Điều gì được coi là một lượng lớn request javascript? Nó không cần nhiều. Tôi cần 20 tệp JavaScript để tải một trang web. Tôi nên làm gì? Có vẻ như tôi chỉ có thể thêm 20 thẻ script và sau đó yêu cầu từng thẻ một. Nhưng điều này trước tiên sẽ làm chậm quá trình tải trang. Bạn cần yêu cầu nhiều tập lệnh sau khi tải trang. Quan trọng hơn, trình duyệt có các hạn chế về yêu cầu: Trình duyệt chỉ cho phép một số lượng yêu cầu nhất định có thể 'fetch data', vì vậy nếu một số lượng lớn yêu cầu được khởi tạo cùng một lúc, sẽ có một vấn đề hiệu suất rất nghiêm trọng cho trình duyệt.

Một số người có thể nói rằng kể từ năm 2019, tôi sử dụng HTTP/2, không vấn đề gì. Nhưng bạn biết có một số trường hợp đặc biệt thì sao? Ví dụ, Airbnb và MS Outlook, họ sử dụng hơn 3000 module để xây dựng hệ thống đấy.

Config webpack ra đời trong hoàn cảnh nào?

Nhìn chung tính tôi nó thế, muốn tìm hiểu thì phải biết hoàn cảnh nó ra đời như thế nào mới một thư viện hay một module. Chính vì vậy trong blog học javascript, chúng tôi cũng có nhiều bài viết giới thiệu những hoàn cảnh ra dời của các thư viện như Moment.js thông báo rằng nó đã ngừng phát triển, chúng ta nên sử dụng gì bây giờ? hoặc vì sao "Redis lại ngừng support". Và nhân tiện đây thì chúng ta đi sâu vào lịch sử của webpack một chút cho cuộc sống lập trình thêm sinh động. Thật ra webpack rất đơn giản và có một định nghĩa rất mạnh mẽ, đúng không, nó giải quyết được hầu hết các vấn đề trên, vậy nó được tạo ra như thế nào? Đây là một câu chuyện nhỏ thú vị

Năm 2012, một người Đức tên Tobias, thạc sĩ ở Newberg (một thành phố ở Hoa Kỳ) muốn viết luận văn. Anh ấy đã viết c# trước đây và chưa bao giờ viết giao diện web. Anh ta cần sử dụng một chức năng được gọi là tách mã trong Bộ công cụ web của Google trong một số trường hợp cụ thể. Trong luận văn của mình, anh ấy cần viết một ứng dụng web, vì vậy anh ấy muốn tìm một thư viện chứa hàm này để sử dụng. Thư viện mà anh ấy tìm thấy được gọi là webmake, cũng là một gói. Nhưng không có chức năng tách mã, vì vậy anh ấy đã nêu ra một vấn đề trên GITHUB và viết một loạt mã về cách triển khai chức năng này, hy vọng rằng những người bảo trì có thể thêm chức năng này. Sau một số cuộc thảo luận, người bảo trì đã từ chối anh ta, vì vậy sau khi được chấp thuận, anh ta đã tách thư viện và tự thêm chức năng này, và đặt tên cho thư viện mới là webpack , nhưng nó chưa phổ biến và chỉ một mình anh ta sử dụng.

Vào năm 2014, Dan Abramov đã đặt một câu hỏi về việc thay thế module trên Stack Overflow. Tobias đã giới thiệu cho anh ấy về chức năng vẫn đang được phát triển trong một không gian rộng lớn và giải thích chi tiết cách chức năng này hoạt động trong webpack và điều này Thật là một chức năng tuyệt vời, bạn không cần phải làm mới trình duyệt của mình!

Link nổi tiếng đây: Đọc đi hay lắm: https://stackoverflow.com/questions/24581873/what-exactly-is-hot-module-replacement-in-webpack

Vào năm 2015, Pete Hunt, người đang làm việc tại Instagram vào thời điểm này, đã nói với thế giới thông qua một bài phát biểu về cách họ sử dụng webpack để đóng gói và phát hành ứng dụng phản ứng của họ. Sau đó, bạn biết đấy, webpack đang cháy. Các công ty như Facebook cũng đã bắt đầu sử dụng webpack. Nhưng trên thực tế, Tobias chỉ dành khoảng 56 giờ cho webpack mỗi tuần. Vâng, trong hai cuộc thảo luận này, webpack đã hoàn toàn phổ biến và đi ra thế giới. Các bạn thấy thế nào? Quá tuyệt vời đúng không?

Config Webpack với ví dụ nhỏ này để giúp bạn làm quen với cấu hình

Xem như tôi đã giới thiệu hoàn cảnh và vì sao lạị sử dụng webpack rồi, và đến đây thì dành cho những bạn mới bắt đầu học cài đặt webpack, kể cả những bạn đã biết rồi cũng nên tham khảo luôn nhé.

1 - Khởi tạo dự án câu hình webpack

AnonyStick$ mkdir demoConfigWebpack
AnonyStick$ 
AnonyStick$ 
AnonyStick$ cd demoConfigWebpack/
AnonyStick$ npm init

webpack đang chạy trong môi trường Node, chúng ta cần cài đặt hai gói npm sau:

npm i -D webpack webpack-cli

À để giới thiệu cho luôn nhé:

npm i -D là viết tắt của npm install --save-dev
npm i -S là viết tắt của npm install --save

nếu như bạn chưa biết về điều này thì tôi gợi ý cho bạn một bài viết rất hay đó là "Nodejs bắt đầu như thế nào?" Đọc đi, hay lắm đấy. Tiếp theo tạo thư mục và file src/main.js có nội dung cơ bản thôi để hiểu webpack nó chạy ra sao đã:

console.log('Please like and subcribe anonystick.com')

Tiếp theo chỉnh sửa trong file package.json như hình ảnh nhớ chú ý chỗ hightlight đấy.

Sau đó thự hiện tiếp command sau:

AnonyStick$ npm run build

Tại thời điểm này, nếu một thư mục dist được tạo và chứa main.js bên trong, xem như điều đó có nghĩa là nó đã được đóng gói thành công và bước đầu khá ngon rồi đấy.

2 - Cấu hình riêng cho dự án của tôi

Ví dụ đơn giản ở trên chỉ là cấu hình mặc định của chính webpack. Dưới đây chúng tôi muốn triển khai cấu hình tùy chỉnh phong phú hơn. Tạo một thư mục mới có tên là build và tạo một file mới có tên webpack.config.js trong thư mục build

// webpack.config.js

const path = require('path');
module.exports = {
    mode:'development', // dev or pro
    entry: path.resolve(__dirname,'../src/main.js'),    // File nhập
    output: {
        filename: 'output.js',      // file xuất
        path: path.resolve(__dirname,'../dist')  // thư mục xuất file
    }
}

Và thay đổi lại file package.json là như hình ảnh dưới đây- hai hình khác nhau nhé mấy cha

Tiếp tục thực hiện

AnonyStick$ npm run build

Điều gì bạn thấy, đó là file output.js sẽ được tạo trong thư mục dist. Một số bạn ở đây có thể nghĩ rằng tên của tệp js đóng gói của chúng tôi luôn cố định (output.js)? Vì vậy, không cần phải thay đổi tên tệp đã nhập mỗi lần? Trên thực tế, chúng tôi thường định cấu hình theo cách này trong quá trình phát triển hàng ngày của mình đó là. Mà nghỉ đã, chờ phẩn hai nhé....

webpack là gì? 4 thao tác giúp bạn làm quen với cấu hình của webpack