Webpack là gì và tại sao nên dùng Webpack cho dự án Javascript của bạn?

Có lẽ Javascript sẽ không thể phát triển tới ngày hôm nay một cách mạnh mẽ nếu không có những thứ như NodeJS hay Angular hay Typescript, hay trong bài viết này là Webpack.

Tóm Tắt

Webpack là gì ?

Webpack là một chương trình, một công cụ giúp bạn tối ưu dung lượng và bảo mật code Javascript. Nó còn được gọi là module bundler. Mục đích cuối cùng của việc bundler này là giảm dung lượng của source code xuống và bảo mật code. Bạn biết đó, Javascipt là ngôn ngữ thông dịch, nghĩa là code nó không được complied như Java hay C#. Bạn viết thế nào thì nó lồ lộ ra đó. Việc sử dụng Webpack sẽ giúp các bạn bảo mật được code bằng cách nó tối ưu tên hàm, nối các module lại thành một file duy nhất.

Thực tế thì yếu tố bảo mật thông tin code không được nhắc tới trong vai trò của Webpack. Nhưng thực sự là đố ông nào hoàn toàn có thể mainternance hoặc lấy code về ngoáy sau khi đã đóng gói bởi Webpack. Nó quá khó ! Còn nếu bạn muốn bảo mật thông tin cho cái source code tốt hơn thì hoàn toàn có thể tìm hiểu thêm bài viết những công cụ bảo mật thông tin Javascript nhá !

Các bạn có thể tham khảo thêm nhiều thông tin tại trang chủ của Webpack nha!

Bạn đang đọc: Webpack là gì và tại sao nên dùng Webpack cho dự án Javascript của bạn?

Tại sao tôi nên dùng ?

Đây là một vài ưu điểm nổi trội của Webpack khi sử dụng :

Giúp cho cho project dễ dàng phát triển, quản lý, customize
Tăng tốc độ cho project
Phân chia các module và chỉ load khi cần
Đóng gói tất cả file nguồn thành một file duy nhất, nhờ vào loader mà có thể biên dịch các loại file khác nhau
Biến các tài nguyên tĩnh ( image, css) trở thành 1 module
Chuyển đổi các mã nguồn : JSX, less, sass, scss thành js
Làm nhẹ mã nguồn khi kéo về client
Bảo mật code hơn khi chia sẻ, hosting …

Javascript đang ngày càng lên ngôi nhờ hàng ti tỉ những module, công cụ. Trong khi sự thay thế sửa chữa can đảm và mạnh mẽ của Single-web-app cho Full-page-reload làm cho Javascript ngày càng được nhiều người sử dụng. Và nếu bạn đã nghe rát tai những thuật ngữ như ReactJS, Angular … thì chắc như đinh sẽ phải dùng Webpack. Nó được tích hợp sẵn trong core .
Webpack giúp nén toàn bộ module thành một file duy nhất
Đấy ! Khi bạn nhìn vào code chạy tối ưu qua webpack, bạn hoàn toàn có thể nản luôn nếu có ý đồ lấy về vọc vạch. Đó là nguyên do mà nhiều người coi đây là cách tối ưu tương đối để cản lại nạn lấy code .

Cách thiết lập Webpack

Các ví dụ sau đây mình không dùng Javascript thuần mà dùng Typescript nên nó có đuôi. ts và. tsx ! Các bạn nếu không dùng Typescript thì hoàn toàn có thể đổi sang đuôi file js nha !
Đầu tiên, Bạn chắc như đinh đã cài Nodejs. Tiếp theo, bạn tạo một thư mục đâu đó với tên nào đó bạn đang rất thích. Okay :

cd /your-folder && npm init

Sau lệnh init, nó sẽ hỏi hàng loạt những loại tương quan tới Project của bạn. Xong ! Chúc mừng bạn đã có một Project Javascript trống trơn !
Cài tiếp Webpack và môi trường tự nhiên dev. Lưu ý là production thì không cần tới webpack nhá. Chả để làm gì 😀

    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0",
    "webpack-node-externals": "^3.0.0"

// chạy lệnh này để cài lên môi trường dev
npm i -D webpack

Okay, giờ các bạn mở file package.json lên. Đây là file cài đặt cho dự án của bạn. Chỉnh sửa như sau:

"scripts": {
    "start": "node dist/index.js",
    "build": "webpack --config webpack.prod.ts",
    "dev": "webpack --config webpack.common.ts",
},

Các bạn sẽ thấy lệnh npm start là chạy file index.js trong folder dist. À nhắc mới nhớ. Bạn cần tạo một folder src/ để chứa mã nguồn. Còn folder dist để chứa code đã bundle nhé!

Khi những bạn dev, những bạn cần gõ lệnh npm run dev để webpack theo dõi file biến hóa và bundle luôn khi những bạn gõ. Tiện lắm. Còn khi ra loại sản phẩm thì dùng lệnh npm run build. Nó sẽ build một đống file và module của những bạn thành một file duy nhất. Cực kỳ tiện lợi luôn !
Tiếp tiếp ! Còn nữa !

Các bạn tìm file webpack.common.ts, còn không thì tạo nó đi, và đây là nội dung file của mình:

const webpack = require("webpack");
const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: ["webpack/hot/poll?100", "./src/index.ts"],
  // devtool: 'inline-source-map',
  watch: true,
  target: "node",
  externals: [
    nodeExternals({
      allowlist: ["webpack/hot/poll?100"]
    })
  ],
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  plugins: [new webpack.HotModuleReplacementPlugin() ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js",
    clean: true
  }
};

Đấy là mình dùng webpack với Typescript. Thực sự với những bạn là nếu không dùng Typescript để gõ Javascript, mình không dám thao tác. Bởi Javascript nó được cho phép tùy thích định nghĩa và biến hóa kiểu tài liệu nên những ông ghi đè nhau tóe loe. Chưa kể là Typescript nó check error ngay tại lúc gõ, thay vì là lúc run-time như Javascript. Cho nên những lỗi cơ bản không lường trước trong lúc chạy được khoanh vùng phạm vi .

Các bạn để ý phần entry: /src/index.ts. Đây là điểm khởi đầu của một dự án. Giống như PHP hay bất kỳ ngôn ngữ gì, nó cũng sẽ có một điểm khởi đầu. Webpack sẽ chạy theo file và module trong file index.ts hoặc index.js để lấy code và tối ưu toàn bộ!

Xem thêm: Ngôn ngữ HTML – Lập Trình Từ Đầu

Chú ý : Mình dùng HMR để không phải reload script mỗi khi gõ code nên tất cả chúng ta sẽ thêm một bước nữa : Mở file index.ts trong root của dự án Bất Động Sản lên và thêm vào cuối :

/**
 * Webpack HMR Activation
 */
 type ModuleId = string | number;

 interface WebpackHotModule {
   hot?: {
     data: any;
     accept(
       dependencies: string[],
       callback?: (updatedDependencies: ModuleId[]) => void,
     ): void;
     accept(dependency: string, callback?: () => void): void;
     accept(errHandler?: (err: Error) => void): void;
     dispose(callback: (data: any) => void): void;
   };
 }
 
 declare const module: WebpackHotModule;
 
 if (module.hot) {
   module.hot.accept();
   module.hot.dispose(() => server.close());
 }

Rồi, những bạn hoàn toàn có thể viết code trên dòng này ! Và giờ thì mỗi khi những bạn có đổi khác gì, nó sẽ tự bundle lại cho bạn !
Điều hay của nó là những bạn hoàn toàn có thể gõ và lưu, việc còn lại nó làm background, tự động hóa tối ưu và tự động hóa bundle cho những bạn luôn ! Đừng ngại !
Tiếp nào, tại file config cho Production để còn chạy lệnh npm run build .
Ta có 2 file config cho thiên nhiên và môi trường dev và thiên nhiên và môi trường Production. Tách biệt nhau luôn và nó build theo cách khác nhau nhá. Build product sẽ không có comment nên code rất ngắn !

Tìm hoặc tạo file webpack.prod.ts ở thư mục gốc của dự án. Sau đó cho các nội dung sau đây vào:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.ts');

module.exports = merge(common, {
  mode: 'production'
});

Ối dồi ôi, tưởng thế LÀO. Thực ra ta lấy config của dev và khai báo mode là “ production ” thôi. Webpack tự nó biết phải làm gì tiếp theo .
Done ! Giờ thì những bạn gõ hết source code bên thư mục SRC và chạy lệnh npm run dev nó sẽ tự bundle cho những bạn sang thư mục dist. Chạy file trong thư mục dist nhá !

Plugin trong Webpack

Một số plugin hay được sử dụng cho Webpack như : UglifyJSPlugin webpackDashboard, webpackbundleanalyzer .
Theo như file thông số kỹ thuật trên của mình thì mình dùng : webpack. HotModuleReplacementPlugin, cái này không dùng trên Production nên không yếu tố gì. Vì nó tác động ảnh hưởng tới Performance .
Ví dụ những plugin hay dùng với Webpack. Các bạn mở file thông số kỹ thuật lên :

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 đầu ra với nhiều tuỳ chọn khác nhau
      sourceMap: true,
      output: {
        comments: false,
        beautify: false
      }
    ),
    new HTMLWebpackPlugin({ title: 'Code Splitting' }),
    new webpack.optimize.CommonsChunkPlugin({ name: 'common' })
  ]
}

Có nhiều plugin hay cho Webpack lắm, những bạn chịu khó tìm trên Internet. Còn mình thì không dùng tới mấy plugin này .

Những trường hợp không nên dùng

È hèm. Ngon như thế nhưng 1 số ít trường hợp không nên dùng : Trường hợp bạn thao tác với thư mục 😀

Vì webpack nó bundle ra thành một file duy nhất. MỘT FILE DUY NHẤT nha các bạn. Cho nên nếu để cấu hình nó bundle từng file trong từng folder thì file cấu hình của các bạn dài như dự án nhà nước đấy!

Xem thêm: Không đọc được file HTML trên điện thoại, bạn phải làm sao?

Có rất nhiều dự án Bất Động Sản của mình không hề xài webpack dù mình cực kỳ khoái món này. Khi thao tác với thư mục, webpack không giúp những bạn tạo thư mục. Và nó cũng không có nghĩa vụ và trách nhiệm tạo đúng file nào vào thư mục nào. Chán thật đấy !
Và tới đây thì những bạn đã hiểu chửa ? Chửa hiểu à ? Subcribe kênh Youtube của mình xem video cho sướng đỡ phải đọc !
Chúc những bạn thành công xuất sắc !

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com