Video học lập trình từng ngày

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

Bạn đang xem: Webpack là gì? những thông tin cơ bản về webpack

Webpack là gì?

Webpack là một module bundler chất nhận được bạn viết bất kỳ định dạng module như thế nào (cũng rất có thể kết hợp), sau đó biên dịch mang đến trình duyệt. Webpack phân bóc tách mã dựa trên cách nó được thực hiện trong ứng dụng của công ty và với phân tích trọng trách theo module này, câu hỏi quản lý, gỡ lỗi, xác minh và khám nghiệm mã của bạn trở nên thuận tiện hơn nhiều.

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

Nếu nó chỉ được sử dụng theo cách này, thì sự việc là gì? không tồn tại cách như thế nào để giới thiệu một lượng bự JavaScript theo phong cách này. Điều gì được coi là một lượng khủng request javascript? Nó không cần nhiều. Tôi cần đôi mươi tệp JavaScript để tải một trang web. Tôi yêu cầu làm gì? có vẻ như tôi chỉ hoàn toàn có thể thêm đôi mươi thẻ script và sau đó yêu ước từng thẻ một. Nhưng điều đó trước tiên sẽ làm cho chậm quy trình tải trang. Bạn cần yêu cầu những tập lệnh sau khoản thời gian tải trang. đặc biệt quan trọng hơn, trình coi ngó có các hạn chế về yêu cầu: Trình lưu ý chỉ được cho phép một số lượng yêu ước nhất định có thể 'fetch data', vì chưng vậy nếu một số trong những lượng phệ yêu ước được khởi tạo nên cùng một lúc, sẽ sở hữu một vấn đề hiệu suất khôn xiết nghiêm trọng mang đến trình duyệt.

Một số người có thể nói rằng kể từ năm 2019, tôi thực hiện HTTP/2, không sự việc 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ọ áp dụng hơn 3000 module để xây dựng hệ thống đấy.

Config webpack thành lập trong hoàn cảnh nào?

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

Năm 2012, một tín đồ Đức thương hiệu Tobias, thạc sĩ ở Newberg (một tp ở Hoa Kỳ) ước ao viết luận văn. Anh ấy sẽ viết c# trước đó và chưa khi nào viết bối cảnh web. Anh ta cần sử dụng một công dụng được call là bóc tách mã trong Bộ giải pháp web của Google trong một vài trường hợp chũm thể. Trong luận văn của mình, anh ấy cần viết một vận dụng web, vì vậy anh ấy muốn tìm một thư viện đựng hàm này nhằm sử dụng. Thư viện mà anh ấy kiếm tìm thấy được điện thoại tư vấn là webmake, cũng là một trong gói. Nhưng không tồn tại chức năng bóc tách mã, bởi vì vậy anh ấy đã nêu ra một vấn đề trên GITHUB và viết hàng loạt mã về kiểu cách triển khai tác dụng này, hy vọng rằng phần đa người bảo trì có thể thêm tính năng này. Sau một số trong những cuộc thảo luận, người gia hạn đã khước từ anh ta, bởi vậy sau khoản thời gian được chấp thuận, anh ta đã bóc tách thư viện với tự thêm tính năng này, và đặt tên cho thư viện bắt đầu là webpack , nhưng nó đang chưa phổ biến chuyể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 bên trên Stack Overflow. Tobias đã reviews cho anh ấy về tính năng vẫn sẽ được cách tân và phát triển trong một không gian rộng to và giải thích chi tiết cách chức năng này vận động trong webpack và vấn đề đó Thật là một tác dụng tuyệt vời, bạn không cần phải làm new trình thông qua của mình!

Link khét 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, bạn đang thao tác tại Instagram vào thời điểm này, vẫn nói với thế giới thông qua một bài phân phát biểu về phong thái họ thực hiện webpack nhằm đóng gói và phát hành vận dụng phản ứng của họ. Sau đó, bạn biết đấy, webpack vẫn cháy. Những công ty như Facebook cũng đã bước đầu sử dụng webpack. Dẫu vậy trên thực tế, Tobias chỉ dành khoảng chừng 56 giờ đến webpack mỗi tuần. Vâng, trong hai cuộc trao đổi này, webpack đã hoàn toàn phổ biến đổi và đi ra chũm giới. Các bạn thấy vậy nào? Quá tuyệt đối đúng không?

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

Xem như tôi đã reviews hoàn cảnh và bởi sao lạị thực hiện webpack rồi, và mang lại đây thì giành riêng cho những các bạn mới ban đầu học thiết đặt webpack, tất cả những chúng ta đã biết rồi cũng bắt buộc tham khảo luôn nhé.

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

lostvulgaros.com$ mkdir demoConfigWebpacklostvulgaros.com$ lostvulgaros.com$ lostvulgaros.com$ cd demoConfigWebpack/lostvulgaros.com$ npm initwebpack đang làm việc trong môi trường thiên nhiên Node, họ cần setup hai gói npm sau:

npm i -D webpack webpack-cliÀ để giới thiệu cho luôn luôn nhé:

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

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

console.log('Please like and subcribe lostvulgaros.com')Tiếp theo sửa đổi trong tệp tin package.json như hình hình ảnh nhớ chăm chú chỗ hightlight đấy.

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

lostvulgaros.com$ npm run buildTại thời điểm này, nếu như một folder dist được tạo nên và chứa main.js mặt trong, xem như điều đó có nghĩa là nó đã được đóng gói thành công xuất sắc và bước đầu khá ngon rồi đấy.

Xem thêm: Giải Bài Tập Hình Học 11 Nâng Cao Chương 3, Giải Bài Tập Hình Học 11 Nâng Cao

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

Ví dụ dễ dàng và đơn giản ở trên chỉ là cấu hình mặc định của chủ yếu webpack. Dưới đây công ty chúng tôi muốn thực hiện cấu hình tùy chỉnh thiết lập phong phú hơn. Tạo một folder mới có tên là build và chế tạo một tệp tin mới mang tên webpack.config.js trong folder build

// webpack.config.jsconst 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') // folder xuất file Và thay đổi lại file package.json là như hình ảnh dưới đây- nhị hình khác nhau nhé mấy cha

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

lostvulgaros.com$ npm run buildĐiều gì chúng ta thấy, đó là file output.js sẽ tiến hành tạo trong folder dist. Một số bạn làm việc đây có thể nghĩ rằng tên của tệp js gói gọn của cửa hàng chúng tôi luôn cố định và thắt chặt (output.js)? bởi vậy, không buộc phải phải biến đổi tên tệp vẫn nhập mỗi lần? bên trên thực tế, shop chúng tôi thường định cấu hình theo phương pháp này trong vượt trình cách tân và phát triển hàng ngày của chính mình đó là. Mà nghỉ đã, chờ phẩn nhì nhé....