WEBPACK LÀ GÌ
Webpack là gì?
Webpack là công cụ giúp đỡ bạn compile các module Javascript. Nó tuyệt được hotline là “module bundler”.
Bạn đang xem: Webpack là gì
Thay bởi nhiều file, nó tạo nên một hoặc vài file nhằm chạy ứng dụng của bạn.
Webpack có thể trở thành bạn bạn sát cánh trong suốt quá trình dev của bạn, bởi vì nó có thể:
Đóng gói các file của bạn.Theo dõi (Watch) các đổi khác và chạy lại những task (như gulp).Có thể chạy biên dịch Babel ES6 sang trọng ES5, nên bạn cũng có thể vô tư viết ES6 mà không ngại trình duyệt chưa cung cấp đầy đủ.Có thể biên dịch CoffeeScript sang trọng Javascript.Có thể chuyển hình ảnh inline lịch sự data URI.Cho phép chúng ta gọi require() trong file CSS.Có thể chạy máy chủ dùng cho development.Có thể hỗ trợ chính sách hot module replacement.Có thể tách bé dại file output thành nhiều file nhỏ để giảm form size khi tải trang.… và còn tương đối nhiều thứ thú vị khác nữa.Webpack không biến thành giới hạn do frontend, mà cùng dùng làm backend Node.js vào lập trình.
Có nhiều đối thủ của Webpack có tương đối nhiều điểm như là với đầy đủ gì Webpack làm. Điểm khác hoàn toàn ở đó là nhiều kẻ thù sinh ra để gia công “task runners”, chủ yếu là triển khai các các bước lặp đi lặp lại, trong lúc Webpack tất cả xuất phân phát là “module bundler”, tức kẻ đóng góp gói những món hàng và trao tay.
Ta vẫn cùng tìm hiểu quá trình thao tác của Webpack ngay lập tức sau đây.
Xem thêm: Tiếng Anh Lớp 5 Tập 2 Review 3, Tiếng Anh Lớp 5 Review 3 Trang 36
Cài đặt Webpack
Webpack tất cả sẵn bằng phương pháp cài đặt global -g hoặc đến từng project.
Nếu bạn thiết lập global để sử dụng bất kì đâu, gõ lệnh:
npm i -g webpack webpack-cliMột khi trả tất, bạn có thể sử dụng cái lệnh webpack-cli:
Cách không giống là ta setup trong 1 project nào đó. Ta sẽ triển khai câu lệnh sau:
npm i webpack webpack-cli --save-devMột khi trả tất, chúng ta thêm những dòng sau vào trong package.json:
"scripts": "build": "webpack" Khi đó, bạn cũng có thể dùng npm run build được nhé.
Tất nhiên, cài new chỉ là cài, không xong, ta đã còn cấu hình Webpack để triển khai theo thứ mình muốn nữa.
Cấu hình Webpack
Nếu bạn lười, hay tốt nhất có thể ta phát âm là Webpack (từ phiên phiên bản 4) mang định có thể thực hiện nay được ngay bài toán sau:
Entry point (điểm ban đầu của source) phía bên trong ./src/index.jsKết trái compile sẽ nằm ở ./dist/main.jsTuy nhiên, họ tạo tệp tin webpack.config.js để thiết lập chi máu hơn.
Cấu hình Entry Point (Đầu vào)
Trong webpack.config.js, chúng ta cũng có thể thay thay đổi path entry point như dưới đây. Mang định nếu khách hàng không nhập thì được đọc là ./src/index.js như vẫn nói ngơi nghỉ trên.
Xem thêm: Truyện Lặng Lẽ Sa Pa Có Mấy Nhân Vật, Truyện Ngắn Lặng Lẽ Sa Pa Có Mấy Nhân Vật
module.exports = /*...*/ entry: "./src/js/main.js" /*...*/
Cấu hình output (đầu ra)
Trong webpack.config.js, chúng ta cũng có thể thay đổi đầu ra. Mặc định lúc không nhập thì đang là ./dist/main.js. Ta có thể đổi thành path khác, ví dụ:module.exports = /*...*/ output: path: path.resolve(__dirname, "dist"), filename: "vendor.js" /*...*/
Sử dụng CSS Loader
Sử dụng Webpack chất nhận được bạn thực hiện import hoặc require trong những dòng code Javascript của mình. Rộng nưa, bạn có thể dùng trong cả CSS, ví dụ như trong tệp tin main.css:import "base/typography.css";import "base/buttons.css";Điều kiện để gia công được là các bạn phải áp dụng RegExp để xác định mục tiêu file nào, ví dụ điển hình với CSS:
module.exports = /*...*/ module: rules: < test: /.css$/, use: "css-loader" , > /*...*/}Thêm nữa, ta có thể có thêm chắt lọc cho riêng rẽ loader vừa hotline như sau:
module.exports = /*...*/ module: rules: < test: /.css$/, use: < loader: "css-loader", options: modules: true > > /*...*/Bạn cũng có thể gọi nhiều loader không giống nhau, ví dụ:
module.exports = /*...*/ module: rules: < test: /.css$/, use: < "style-loader", "css-loader", > > /*...*/Trong ví dụ sinh sống trên:
css-loader làm trách nhiệm import file typography.css + buttons.css vàp trong 1 file CSS duy nhất.