Webpack Là Gì

Xin xin chào toàn bộ những các fan, nội dung bài viết này mình xin trình bày về một vài kiến thức và kỹ năng về Webpack

1) Webpack là gì ?

Webpaông chồng là khí cụ khiến cho bạn compile những module Javascript. Nó tuyệt được Điện thoại tư vấn là “module bundler”.

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

*

2) Ưu điểm

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

npm init

Sau Lúc chạy xong lên trên mặt thì vào thư mục sẽ có một tệp tin package.json

Cài đăt webpack:

Cài đặt global để sử 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 lúc chấm dứt thì tệp tin package.json sẽ có được nội dung như thế này:

*

Sau khi thiết đặt được webpack vào project thì bản thân khởi sinh sản 1 file webpack.config.js nhằm config cho Webpack

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

output : Nó vẫn chỉ mang đến webpaông xã biết cần phải giữ tệp tin sau thời điểm được compile ra đâu

Sau khi config xong chúng ta chạy lệnh webpaông xã nhằm bundle ra tệp tin output, đây là kết cấu thuc mục khi mà bản thân triển khai các lệnh trên

*

4) Module trong webpack

Ta đang gồm entry với output rồi, tiếp theo sau họ sẽ có đượ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à những xử lý được nạp trước khi bắt đầu cùng với những module loader. Thông thường vào preLoader những dev sẽ check syntax của nó với JSHint tuyệt ESLint (chính sách này thường xuyên tùy chỉnh mặt môi trường thiên nhiên webpack-dev-server), trên môi trường thiên nhiên thực tế ko lên triển khai vấn đề này bởi vì sẽ làm mất đi thêm thời hạn kiểm tra cú pháp ko quan trọng, các bước này thường thiết lập cấu hình trên môi trường thiên nhiên dev-hệ thống.loaders:Là những giải pháp xử lý complie những ngữ điệu khác nhau.Cho phnghiền cách xử lý 1 tệp tin trước khi require (import) hoặc load vàoGiúp biến hóa 1 file từ khá nhiều ngôn ngữ ( cú pháp ) khác biệt sang js thuần (JSX, ES6, ES7 ..., CSS - require 1 file css trong js)postLoaders: Là hậu xử trí, Các xử trí ở đầu cuối sẽ được thông qua thằng này

Nhưng từ phiên phiên bản v2.1-beta.23 loaders sẽ thay tên thành rules cùng preLoaders/postLoaders sẽ tiến hành xác định với thuộc tính enforce ví như loaders đó là preLoaders hoặc postLoaders.

Xem thêm:

rules: es5*/ test: /.js$/, chỉ nạp đầy đủ tệp tin gồm format .js exclude: /node_module/, // bỏ qua mất những thư mục node_module loader: "babel-loader", enforce: "pre", //preLoaders enforce: "post", //postLoaders // thiết lập cấu hình giành riêng cho loader options: presets: <"es2015"> , query: //cacheDirectory tập tin vẫn biên dịch, sẽ không còn transsize lại ví như nó ko biến đổi optional: "runtime", cacheDirectory: true, presets: <"es2015"> >Trong đó:

test: value là chuỗi regex so khớp với các định hình tệp tin, Lúc trình phân tích trải qua thử nghiệm nó đang nạp các tệp tin này nhằm chuẩn bị cho quá trình xử lýexclude: value là chuỗi regex so khớp cùng với những định dạng file, Khi trình phân tích đi qua exclude tự động nó đã bỏ qua mất so sánh những tệp tin này (thường thì ta sẽ vứt file node_module đi).loader: đấy là yếu tố quan trọng tuyệt nhất, nó đó là những loader module nhưng chúng ta cài từ những gói package npm. lấy ví dụ bên trên mình đã thực hiện các gói loader là style-loader, css-loader và babel-loader. Trình phân tích loader đang so sánh chuỗi phía bên trong của chính nó theo 1 mảng với đi sau là query-string. Đoạn mã cùng với loader css sinh hoạt trên mình rất có thể viết là loader: <‘style-loader’,’css-loader’>, cùng với loader babel-loader mình rất có thể viết là: loader: "babel-loader?optional=runtime,cacheDirectory=true,presets: <"es2015">

5) Plugin vào webpack

Plugin cũng tương tự Loader webpaông chồng ta vừa thông số kỹ thuật sinh sống bên trên, tuy vậy nó làm được rất nhiều rộng với nó là một trong những phần đặc trưng của Webpaông chồng. Một số plugin thường được sử dụng như là 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 sạc ra với khá nhiều tuỳ chọn khác biệt 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 cấu hình thiết lập kịch bản môi trường xung quanh nhằm mục tiêu tăng thời hạn deploy và giảm thời lượng đợi không cần thiết. Chế độ này được Webpack trình làng trong phiên bản

Nó bao gồm:

developmentproduction

config mode trong webpaông xã nhỏng sau

module.exports = mode: "development"Chế độ development thực hiện một trong những ưu tiên riêng:

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

Ngược với development, chính sách production chậm hơn, tuy vậy lại tối ưu xuất sắc rộng tác dụng đầu ra. Kết quả là file Javascript cổng đầu ra có kích cỡ nén bé dại rộng.

7) Thiết lập những kịch bản Webpack

Để cấu hình thiết lập những kịch bạn dạng webpack các 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 đổi khác với cập nhật"scripts": "watch": "webpaông xã --watch" // lệnh chạy npm run watch

Kết bài

Webpaông xã là 1 trong những biện pháp nói theo một cách khác là vượt hữu ích, thông thuộc webpack là một trong những ưu thế rất lớn Khi code, nó góp bọn họ dễ thsống rộng trong quá trình và tối ưu project và quản lý dự án một phương pháp tốt vờiCám ơn số đông người sẽ theo dõiNguồn tmê mệt khảo

Leave a Reply

Your email address will not be published. Required fields are marked *