Tìm Hiểu Về Webpack Là Gì ? Tìm Hiểu Nhanh Những Kiến Thức Về Webpack
Xin kính chào tất cả những mọi bạn, nội dung bài viết này bản thân xin trình bày về một số kỹ năng về Webpack
1) Webpack là gì ?
Webpachồng là mức sử dụng giúp cho bạn compile các module Javascript. Nó hay được Điện thoại tư vấn là “module bundler”.Bạn đang xem: Tìm Hiểu Về Webpack Là Gì ? Tìm Hiểu Nhanh Những Kiến Thức Về Webpack
2) Ưu điểm
Một số điểm mạnh khi dùng webpack
npm init
Sau khi chạy ngừng lên phía trên thì trong thỏng mục vẫn có 1 tệp tin 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 1 project như thế nào đó
npm install --save-dev webpack
Sau Lúc dứt thì file package.json sẽ sở hữu ngôn từ như thế này:
const path = require("path");const config = entry : "./src/index.js", // File đầu vào output : // File Áp sạc ra filename : "bundle.js", // Tên file Áp sạc ra path : path.resolve(__dirname, "build") // Nơi chưa tệp tin đầu ra module.exports = config;entry: Là file webpaông xã đã ban đầu làm việc cùng tiến hành viêc nạp file nhằm tiến hành vấn đề bundler, nó đang đi trường đoản cú tệp tin mà chúng ta lựa chọn. Nó sẽ import tiếp module từ thằng này import rồi thằng khác import trường đoản cú thằng khác không giống nữa từ bỏ đó sẽ kéo theo một chuỗi gồm khối hệ thống vấn đề load những js module
output : Nó vẫn chỉ mang lại webpaông chồng biết cần phải lưu tệp tin sau khoản thời gian được compile ra đâu
Sau khi config chấm dứt bọn họ chạy lệnh webpack để bundle ra tệp tin output, đấy là cấu tạo thuc mục khi cơ mà bản thân thực hiện các lệnh trên
4) Module trong webpack
Ta vẫn có entry và output rồi, tiếp sau chúng ta sẽ sở hữu Module, Trong module được phân ra làm 3 mục nhỏ
preLoaders: Các chi phí giải pháp xử lý,là những cách xử trí được hấp thụ trước lúc bước đầu cùng với các module loader. Thông thường vào preLoader những dev sẽ check syntax của chính nó cùng với JSHint hay ESLint (chế độ này thường thiết lập bên môi trường thiên nhiên webpack-dev-server), trên môi trường thực tiễn ko lên thực hiện vấn đề đó vị đã làm mất đi thêm thời gian kiểm tra cú pháp ko cần thiết, công việc này thường tùy chỉnh thiết lập bên trên môi trường xung quanh dev-VPS.loaders:Là những xử trí complie những ngữ điệu khác nhau.Cho phép giải pháp xử lý 1 tệp tin trước lúc require (import) hoặc load vàoGiúp đổi khác 1 tệp tin từ rất nhiều ngữ điệu ( cú pháp ) khác biệt sang trọng js thuần (JSX, ES6, ES7 ..., CSS - require 1 tệp tin css trong js)postLoaders: Là hậu xử lý, Các cách xử trí ở đầu cuối sẽ tiến hành thông qua thằng nàyNhưng từ phiên bạn dạng v2.1-beta.23 loaders sẽ thay tên thành rules và preLoaders/postLoaders sẽ tiến hành xác định với nằm trong tính enforce giả dụ loaders chính là preLoaders hoặc postLoaders.
Xem thêm: Tục Lệ Thách Cưới Là Gì ? Thách Cưới Đòi Hỏi Những Lễ Vật Gì?
rules: es5*/ test: /.js$/, chỉ nạp hồ hết tệp tin gồm định dạng .js exclude: /node_module/, // bỏ qua những thỏng mục node_module loader: "babel-loader", enforce: "pre", //preLoaders enforce: "post", //postLoaders // cấu hình thiết lập dành cho loader options: presets: <"es2015"> , query: //cacheDirectory tập tin đã biên dịch, sẽ không transform lại ví như 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 các định hình file, khi trình so với đi qua thử nghiệm nó đã nạp các tệp tin này nhằm chuẩn bị mang lại quá trình xử lýexclude: value là chuỗi regex so khớp với các định dạng tệp tin, Lúc trình phân tích trải qua exclude tự động hóa nó vẫn làm lơ so với các tệp tin này (hay thì ta vẫn vứt tệp tin node_module đi).loader: đó là yếu tắc đặc trưng độc nhất, nó chính là các loader module cơ mà chúng ta cài đặt trường đoản cú các gói package npm. lấy ví dụ bên trên mình đã áp dụng những gói loader là style-loader, css-loader cùng babel-loader. Trình so với loader đã so với chuỗi bên phía trong của nó theo 1 mảng với đi sau là query-string. Đoạn mã cùng với loader css ngơi nghỉ trên mình rất có thể viết là loader: <‘style-loader’,’css-loader’>, 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 trong webpack
Plugin cũng như Loader webpachồng ta vừa cấu hình sống bên trên, nhưng nó làm cho được không ít rộng và nó là một phần đặc biệt của Webpaông xã. Một số plugin hay sử 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 bạn sẽ nén file Javascript cổng output với rất nhiều tuỳ lựa chọn khác nhau sourceMap: true, output: comments: false, beautify: false ), new HTMLWebpackPlugin( title: "Code Splitting" ), new webpaông xã.optimize.CommonsChunkPlugin( name: "common" ) >
6) Chế độ (mode) trong Webpack
Việc tùy chỉnh cấu hình kịch phiên bản môi trường xung quanh nhằm tăng thời gian deploy cùng giảm thời lượng ngóng không cần thiết. Chế độ này được Webpack ra mắt trong phiên bảnNó bao gồm:
developmentproductionconfig mode trong webpack nlỗi sau
module.exports = mode: "development"Chế độ development thực hiện một số trong những ưu tiên riêng:
Build nhanhÍt tối ưu hoá code, nén code rộng.Không xoá bỏ các phản hồi vào code.Cung cấp cho thêm biết tin lỗi với gợi ýCung cấp thêm kỹ năng debug xuất sắc hơn.Ngược với development, chế độ production chậm rì rì hơn, mặc dù lại buổi tối ưu giỏi rộng tác dụng Áp sạc ra. Kết quả là file Javascript áp ra output gồm kích thước nén nhỏ dại rộng.
7) Thiết lập các kịch bản Webpack
Để tùy chỉnh cấu hình các kịch phiên bản webpaông xã các bạn msống file package.json lên để thiết lập
Chạy webpack"scripts": "build": "webpack" // lệnh chạy npm run buildXem biến hóa với cập nhật"scripts": "watch": "webpaông xã --watch" // lệnh chạy npm run watch
