Webpack là lao lý ngày dần được cộng đồng áp dụng Javascript yêu thích. Quý Khách đã hiểu cách thức thống trị Webpaông xã với áp dụng nó cho project của chính bản thân mình chưa?

Webpack là gì?

Webpack là chế độ khiến cho bạn compile các module Javascript. Nó tuyệt được Gọi là “module bundler”.

Bạn đang xem: Webpack dành cho người bắt đầu

Tgiỏi vì chưng những tệp tin, nó tạo nên một hoặc vài tệp tin nhằm chạy ứng dụng của khách hàng.

Webpaông xã rất có thể phát triển thành bạn các bạn đồng hành nhìn trong suốt quá trình dev của chúng ta, chính vì nó có thể:

Đóng gói các tệp tin của khách hàng.Theo dõi (Watch) những chuyển đổi với chạy lại các task (như gulp).cũng có thể chạy biên dịch Babel ES6 quý phái ES5, phải chúng ta có thể vô bốn viết ES6 nhưng mà không phải lo ngại trình coi sóc chưa hỗ trợ không thiếu thốn.cũng có thể biên dịch CoffeeScript quý phái Javascript.Có thể gửi hình họa inline quý phái data URI.Cho phép các bạn gọi require() trong tệp tin CSS.cũng có thể chạy máy chủ cần sử dụng mang đến development.Có thể cung ứng chế độ hot module replacement.Có thể bóc nhỏ file output thành các file nhỏ nhằm bớt size Khi sở hữu trang.… với còn rất nhiều vật dụng độc đáo khác nữa.

Webpaông chồng không trở nên giới hạn vị frontover, mà cùng dùng có tác dụng backover Node.js vào lập trình.

Có nhiều kẻ địch của Webpachồng có không ít điểm như là với phần lớn gì Webpachồng có tác dụng. Điểm biệt lập sinh hoạt đấy là những kẻ thù ra đời để triển khai “task runners”, tất cả là tiến hành các các bước lặp đi tái diễn, trong lúc Webpaông xã bao gồm xuất xứ là “module bundler”, tức kẻ gói gọn những món mặt hàng và trao tay.

Ta vẫn thuộc khám phá quy trình thao tác làm việc của Webpaông chồng ngay dưới đây.

Cài đặt Webpack

Webpachồng bao gồm sẵn bằng cách thiết đặt global -g hoặc cho 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 webpaông chồng webpack-cliMột Khi hoàn chỉnh, bạn có thể sử dụng mẫu lệnh webpack-cli:

*

Cách không giống là ta thiết đặt trong một project như thế nào đó. Ta sẽ thực hiện câu lệnh sau:

npm i webpaông chồng webpack-cli --save-devMột Lúc hoàn tất, bạn thêm những cái sau vào trong package.json:

"scripts": "build": "webpack" Lúc kia, bạn cũng có thể cần sử dụng npm run build được nhé.

Tất nhiên, cài mới chỉ là thiết lập, chưa ngừng, ta vẫn còn thông số kỹ thuật Webpaông chồng để làm theo thiết bị mình thích nữa.

Cấu hình Webpack

Nếu chúng ta lười, giỏi cực tốt ta đọc là Webpaông xã (từ phiên bạn dạng 4) mặc định rất có thể tiến hành được tức thì việc sau:

Entry point (điểm ban đầu của source) phía trong ./src/index.jsKết trái compile vẫn nằm tại vị trí ./dist/main.js

Tuy nhiên, họ tạo file webpaông chồng.config.js để cấu hình thiết lập cụ thể rộng.

Cấu hình Entry Point (Đầu vào)

Trong webpack.config.js, bạn có thể biến đổi path entry point nlỗi sau đây. Mặc định nếu như khách hàng ko nhập thì được hiểu là ./src/index.js nhỏng đã nhắc đến ở trên.

Xem thêm: What Is Cosmos Là Gì ? Tất Cả Thông Tin Về Đồng Coin Atom Cosmos (Atom) Là Gì

module.exports = /*...*/ entry: "./src/js/main.js" /*...*/

Cấu hình output (đầu ra)

Trong webpachồng.config.js, chúng ta có thể đổi khác cổng output. Mặc định khi không nhập thì đang là ./dist/main.js. Ta rất có thể thay đổi path khác, ví dụ:

module.exports = /*...*/ output: path: path.resolve(__dirname, "dist"), filename: "vendor.js" /*...*/

Sử dụng CSS Loader

Sử dụng Webpaông xã chất nhận được chúng ta thực hiện import hoặc require trong số chiếc code Javascript của chính mình. Hơn nưa, bạn có thể dùng vào cả CSS, ví dụ trong file main.css:

import "base/typography.css";import "base/buttons.css";Điều kiện để gia công được là các bạn đề nghị thực hiện RegExp nhằm xác định kim chỉ nam tệp tin như thế 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ể tất cả thêm chọn lọc mang lại riêng biệt loader vừa call nhỏng sau:

module.exports = /*...*/ module: rules: < test: /.css$/, use: < loader: "css-loader", options: modules: true > > /*...*/quý khách cũng rất có thể Hotline những loader khác biệt, ví dụ:

module.exports = /*...*/ module: rules: < test: /.css$/, use: < "style-loader", "css-loader", > > /*...*/Trong ví dụ sống trên:

css-loader làm trọng trách import file typography.css + buttons.css vàp trong 1 tệp tin CSS độc nhất vô nhị.

style-loader làm trọng trách gán style vào vào DOM, áp dụng tag 

Loader SASS sang trọng CSS

module.exports = /*...*/ module: rules: < test: /.scss$/, use: < "style-loader", "css-loader", "sass-loader" > > /*...*/

Tạo SourceMap

Source Map giúp cho bạn tracking đúng mực phần đa phần làm sao đề nghị sửa trong source.

module.exports = /*...*/ devtool: "inline-source-map", /*...*/Quý Khách đã chần chừ không rõ bao hàm các loại loader như thế nào hoàn toàn có thể sử dụng? Tra cứu giúp danh sách loader trên đây.

Sử dụng Babel Loader

Ta hãy cùng bài viết liên quan 1 nhiều loại loader nữa, sống đấy là biên dịch Babel nhằm chuyển từ bỏ ES6 về ngược lại ES5 lúc compile.

module.exports = /*...*/ module: rules: < test: /.js$/, exclude: /(node_modules > /*...*/Hoặc bạn muốn nó xử trí riêng cho các file React/JSX thôi:

module.exports = /*...*/ module: rules: < test: /.(js > , resolve: extensions: < ".js", ".jsx" > /*...*/Vậy vẫn là cực kỳ độc đáo rồi nên không?

Các plugin của Webpack

Plugin cũng như Loader webpachồng ta vừa thông số kỹ thuật ở bên trên, tuy vậy nó làm cho được rất nhiều rộng với nó là một phần đặc biệt quan trọng của Webpaông xã.

Hãy mang ví dụ:

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")module.exports = plugins: < new UglifyJsPlugin( sourceMap: true, output: comments: false, beautify: false ) >Với plugin này bạn sẽ nén file Javascript cổng output với nhiều tuỳ chọn khác nhau.

Chế độ (mode) vào Webpack

Việc thiết lập cấu hình kịch bản môi trường xung quanh nhằm mục đích tăng thời hạn deploy và giảm thời lượng đợi không quan trọng. Chế độ này được Webpachồng ra mắt vào phiên bạn dạng 4. Nó bao gồm:

developmentproduction

khi cấu hình, các bạn sẽ nhập thêm param mode nhỏng ví dụ sau:

module.exports = mode: "development"Chế độ development triển khai một vài ưu tiên riêng:

Build nhanhÍt buổi tối ưu hoá code, nén code rộng.Không xoá bỏ các phản hồi vào code.Cung cung cấp thêm biết tin lỗi cùng gợi ý.Cung cung cấp thêm khả năng debug tốt hơn.

Ngược cùng với development, cơ chế production lờ lững rộng, tuy vậy lại về tối ưu xuất sắc hơn tác dụng cổng output. Kết quả là file Javascript áp ra output bao gồm size nén nhỏ dại rộng.

Thiết lập những kịch bạn dạng Webpack

Bạn xác định các kịch bản trong file package.json nhằm nó hoàn toàn có thể triển khai.

Chạy Webpack

"scripts": "build": "webpack"Lệnh: npm run build

Xem biến đổi cùng cập nhật

"scripts": "watch": "webpaông xã --watch"Lệnh: npm run watch

Kết luận

Webpaông xã y như một đời ô tô hết sức sang với tương đối nhiều thiết bị hơi độc đáo khiến cho bạn cảm giác chuyến hành trình tốt rộng. Tuy thế, nó đòi hỏi chúng ta nên đọc, vọc với tìm kiếm cách integrate với project của bản thân mình. Trong bài viết sau, Code Tốt đã lý giải các bạn có tác dụng thân quen với integrate với cùng 1 project cụ thể nhé.