Webpack là gì

Xin kính chào tất cả các phần đa fan, nội dung bài viết này bản thân xin trình diễn về một số trong những kỹ năng và kiến thức về Webpack

1) Webpaông chồng là gì ?

Webpaông chồng là chế độ giúp đỡ bạn compile các module Javascript. Nó xuất xắc được Hotline là “module bundler”.

Bạn đang xem: Webpack là gì

*

2) Ưu điểm

Một số ưu điểm khi sử dụng webpack

npm init

Sau Lúc chạy chấm dứt lên phía trên thì trong thư mục đang có một file package.json

Cài đăt webpack:

Cài đặt global nhằm áp dụng bất kì đâu

npm install -g webpack

Cài đặt trong một project như thế nào đó

npm install --save-dev webpack

Sau Khi xong xuôi thì file package.json sẽ sở hữu được ngôn từ như thế này:

*

Sau Lúc thiết đặt được webpachồng vào project thì mình khởi tạo nên 1 tệp tin webpachồng.config.js để config mang đến Webpack

const path = require("path");const config = entry : "./src/index.js", // File nguồn vào output : // File cổng đầu ra filename : "bundle.js", // Tên file đầu ra path : path.resolve(__dirname, "build") // Nơi chưa file Áp sạc ra module.exports = config;entry: Là file webpack đã ban đầu làm việc cùng thực hiện viêc hấp thụ tệp tin nhằm triển khai vấn đề bundler, nó vẫn đi từ bỏ tệp tin mà bạn lựa chọn. Nó sẽ import tiếp module tự thằng này import rồi thằng khác import tự thằng khác khác nữa trường đoản cú này sẽ kéo theo một chuỗi có hệ thống Việc load các js module

output : Nó đang chỉ cho webpack biết rất cần được lưu file sau khi được compile ra đâu

Sau Khi config hoàn thành bọn họ chạy lệnh webpaông xã nhằm bundle ra file output, đấy là cấu tạo thuc mục lúc nhưng mà mình triển khai những lệnh trên

*

4) Module vào webpack

Ta vẫn gồm entry và output rồi, tiếp theo họ sẽ có Module, Trong module được phân ra có tác dụng 3 mục nhỏ

preLoaders: Các tiền cách xử trí,là các cách xử lý được hấp thụ trước lúc bắt đầu với những module loader. Thông thường trong preLoader các dev vẫn kiểm tra syntax của nó cùng với JSHint giỏi ESLint (chính sách này thường tùy chỉnh cấu hình mặt môi trường webpack-dev-server), trên môi trường thực tế ko lên xúc tiến điều đó vị sẽ làm mất thêm thời hạn check cú pháp ko quan trọng, các bước này thường cấu hình thiết lập trên môi trường thiên nhiên dev-server.loaders:Là các xử trí complie những ngữ điệu khác biệt.Cho phép giải pháp xử lý 1 file trước khi require (import) hoặc load vàoGiúp thay đổi 1 file từ khá nhiều ngữ điệu ( cú pháp ) khác nhau lịch sự js thuần (JSX, ES6, ES7 ..., CSS - require 1 file css vào js)postLoaders: Là hậu xử trí, Các xử trí cuối cùng sẽ tiến hành trải qua thằng này

tuy nhiên, từ phiên bản v2.1-beta.23 loaders vẫn đổi tên thành rules và preLoaders/postLoaders sẽ được xác minh cùng với trực thuộc tính enforce trường hợp loaders đó là preLoaders hoặc postLoaders.

Xem thêm: Máy Ảo Vmware Không Nhận Card Wifi, Vấn Đề Nhận Card Wireless Trong Kali Linux

rules: es5*/ test: /.js$/, chỉ nạp đầy đủ file bao gồm format .js exclude: /node_module/, // bỏ lỡ các thư mục node_module loader: "babel-loader", enforce: "pre", //preLoaders enforce: "post", //postLoaders // tùy chỉnh thiết lập dành riêng cho loader options: presets: <"es2015"> , query: //cacheDirectory tập tin sẽ biên dịch, sẽ không transkhung lại giả dụ nó ko đổi khác optional: "runtime", cacheDirectory: true, presets: <"es2015"> >Trong đó:

test: value là chuỗi regex so khớp cùng với những định hình tệp tin, Khi trình phân tích trải qua test nó đang hấp thụ các tệp tin này nhằm sẵn sàng mang lại quá trình xử lýexclude: value là chuỗi regex so khớp cùng với những format file, khi trình đối chiếu đi qua exclude auto nó vẫn làm lơ so với các tệp tin này (thường xuyên thì ta vẫn vứt file node_module đi).loader: đó là thành phần đặc trưng nhất, nó chính là những loader module mà lại chúng ta thiết lập từ những gói package npm. lấy ví dụ như bên trên mình đã áp dụng các gói loader là style-loader, css-loader cùng babel-loader. Trình đối chiếu loader đã so với chuỗi bên trong của chính nó theo 1 mảng cùng đi sau là query-string. Đoạn mã cùng với loader css sinh sống trên bản thân có thể viết là loader: <‘style-loader’,’css-loader’>, với loader babel-loader mình hoàn toàn có thể viết là: loader: "babel-loader?optional=runtime,cacheDirectory=true,presets: <"es2015">

5) Plugin vào webpack

Plugin tương tự như Loader webpaông chồng ta vừa cấu hình sống trên, mà lại nó làm được nhiều rộng và nó là 1 phần đặc biệt của Webpaông chồng. Một số plugin hay được dùng như thể UglifyJSPlugin webpackDashboard, webpackbundleanalyzer,…

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const HTMLWebpackPlugin = require("html-webpack-plugin");module.exports = plugins: < new UglifyJsPlugin( // Với plugin này các bạn sẽ nén tệp tin Javascript áp ra output với rất nhiều tuỳ chọn không giống nhau sourceMap: true, output: comments: false, beautify: false ), new HTMLWebpackPlugin( title: "Code Splitting" ), new webpaông chồng.optimize.CommonsChunkPlugin( name: "common" ) >

6) Chế độ (mode) trong Webpack

Việc tùy chỉnh kịch bạn dạng môi trường xung quanh nhằm mục tiêu tăng thời gian deploy cùng sút thời lượng chờ không quan trọng. Chế độ này được Webpachồng ra mắt trong phiên bản

Nó bao gồm:

developmentproduction

config mode vào webpaông xã nlỗi sau

module.exports = mode: "development"Chế độ development tiến hành một số ưu tiên riêng:

Build nhanhÍt về tối ưu hoá code, nén code hơn.Không xoá vứt những phản hồi trong code.Cung cấp cho thêm thông báo lỗi với gợi ýCung cấp cho thêm năng lực debug xuất sắc rộng.

Xem thêm: Tân Hiệp Phát Gài Bẫy Người Tiêu Dùng — Tiếng Việt, Tân Hiệp Phát Có Gài Bẫy Khách Hàng

Ngược cùng với development, chế độ production đủng đỉnh hơn, tuy nhiên lại về tối ưu tốt rộng hiệu quả đầu ra output. Kết quả là file Javascript đầu ra output tất cả form size nén nhỏ rộng.

7) Thiết lập các kịch phiên bản Webpack

Để tùy chỉnh các kịch bản webpack bạn msinh sống tệp tin package.json lên nhằm thiết lập

Chạy webpack

"scripts": "build": "webpack" // lệnh chạy npm run buildXem chuyển đổi và cập nhật"scripts": "watch": "webpack --watch" // lệnh chạy npm run watch

Kết bài

Webpack là một trong mức sử dụng nói theo cách khác là quá hữu dụng, thông thuộc webpaông xã là 1 ưu thế rất lớn Khi code, nó góp họ dễ thsinh sống hơn trong công việc với về tối ưu project và cai quản dự án công trình một bí quyết tuyệt vờiCám ơn hầu như người đang theo dõiNguồn tsi mê khảo


Chuyên mục: Blockchain