Lập trình

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

Đời mấy ông viết Javascript mà không biết tới TypeScript, Webpack thì đời của các ông không khá lên được đâu! Tin tôi đi! 😀

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.

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ì vấn đề bảo mật code không được nhắc tới trong vai trò của Webpack. Nhưng thực sự là đố ông nào 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 cho cái source code tốt hơn thì có thể tham khảo bài viết các công cụ bảo mật 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!

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ỉ các module, công cụ. Trong khi sự thay thế 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 chắn 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
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 có thể nản luôn nếu có ý đồ lấy về vọc vạch. Đó là lý do mà nhiều người coi đây là cách tối ưu kha khá để cản lại nạn lấy code.

Cách cài đặt 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ì có thể đổi sang đuôi file js nha!

Đầu tiên, Bạn chắc chắn đã cài Nodejs. Tiếp theo, bạn tạo một folder đâ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 các loại liên 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 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 các bạn dev, các bạn cần gõ lệnh npm run dev để webpack theo dõi file thay đổi và bundle luôn khi các bạn gõ. Tiện lắm. Còn khi ra sản phẩm thì dùng lệnh npm run build. Nó sẽ build một đống file và module của các bạn thành một file duy nhất. Cực kỳ tiện dụng 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 các bạn là nếu không dùng Typescript để gõ Javascript, mình không dám làm việc. Bởi Javascript nó cho phép tùy thích định nghĩa và thay đổi kiểu dữ liệu nên các ô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 các lỗi cơ bản không lường trước trong lúc chạy được khoanh vùng.

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ộ!

Chú ý: Mình dùng HMR để không phải reload script mỗi khi gõ code nên chúng ta sẽ thêm một bước nữa: Mở file index.ts trong root của dự á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, các bạn có thể viết code trên dòng này! Và giờ thì mỗi khi các bạn có thay đổi gì, nó sẽ tự bundle lại cho bạn!

Điều hay của nó là các bạn có thể gõ và lưu, việc còn lại nó làm background, tự động tối ưu và tự động bundle cho các 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 môi trường dev 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ì các 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 các bạn sang folder 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 cấu hình 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 vấn đề gì. Vì nó ảnh hưởng tới Performance.

Ví dụ các plugin hay dùng với Webpack. Các bạn mở file cấu hình 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, các 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 một số trường hợp không nên dùng: Trường hợp bạn làm việc với folder 😀

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!

Có rất nhiều dự án của mình không thể xài webpack dù mình cực kỳ khoái món này. Khi làm việc với folder, webpack không giúp các bạn tạo folder. Và nó cũng không có trách nhiệm tạo đúng file nào vào folder nào. Chán thật đấy!

Và tới đây thì các 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 các bạn thành công!

Thông tin liên quan

Bạn đang xem bài viết webpack tại blog cá nhân của Jam. Còn rất nhiều các bài viết khác tại chuyên mục Lập trình đang được yêu thích.