Tìm hiểu về Angular2 Webpack

Bài đăng này đã không được cập nhật trong 3 năm

I. Webpack là gì

Ngày nay các ứng dụng sử dụng Javascript ngày càng phổ biến, vì vậy nhu cầu cần có một công cụ để quản lý code client là cần thiết. Webpack được xây dựng nên để giải quyết vấn đề đó.

Trích dẫn từ Webpack

"webpack is a module loader" that "takes modules with dependencies and generates static assets". Additionally, it provides a plugin system and methods for processing files.

Vậy Webpack là gì?

Webpack là một module bundler cho những ứng dụng javascript hiện đại. Bundle là quá trình gom (hay còn gọi là nén) các tài nguyên khác nhau (source code) vào một file duy nhất sau đó sẽ trả về client. Bundle có thể bao gồm javascript, css, html và hầu hết các loại file khác. Đồng thời, nó cũng có những ứng dụng khá tương đồng với các thư viện khác như: RequireJs, SystemJs,..Kết hợp với một số plugin nó có thể xử lý và nén các loại file như: Typescript, SASS, và LESS.

II. Cài đặt webpack

Rất đơn giản để cài đặt webpack qua npm

 npm install webpack -g

Thêm file package.json bằng npm(Package.json là file cấu hình của npm, giúp cho npm hiểu nó cần phải cài đặt cái gì, thông tin về ứng dụng, phiên bản, ...)

npm init

Lệnh trên sẽ hỏi bạn nhập: tên project, version, author, github,...

{
    "name": "webpackProject",
    "version": "0.0.1",
    "description": "How to learn webpack",
    "private": true,
    "scripts": {
      "prod": "gulp --production",
      "dev": "gulp watch"
    },
   "devDependencies": {
      "gulp": "^3.9.1",
      "laravel-elixir": "^5.0.0",
      "bootstrap-sass": "^3.0.0"
  },
    "author": "Hiennv"
}

II. Một số khái niệm quan trọng trong webpack

1. Entry Điểm gốc rễ mà webpack tạo ra cho ứng dụng gọi là entry. Entry nói cho webpack nơi để bắt đầu và theo dõi các phụ thuộc để biết được cái gì cần bundle. Hoặc bạn có thể hiểu entry như file đầu tiên để khởi động app. Tạo file webpack.config.js

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};

app.js

document.write("Beginning of project");

index.html

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <h1>Webpack project</h1>
  </body>
</html>

Đoạn code trên đơn giản là nhận input là file app.js và trả về file 'bundle.js'. Sau đó chúng ta có thể insert file bundle.js vào code html và sử dụng. Bundle nhiều file js thành 1 file js Tạo thêm file sub.js

document.write("Code is continue!");

Thay đổi nội dung file app.js thành:

require("sub.js");
document.write("Beginning of project");

Lúc này file bundle.js sẽ tổng hợp 2 file vào bundle.js. Điều này rất tiện khi code ứng dụng có chứa nhiều file js. Bạn sẽ không phải chạy tất cả các file js không cần thiết trong thư mực của project nữa, thay vào đó, chỉ là những file cần thiết thôi. 2. Output Đây là nơi chỉ cho Webpack cần lưu trữ khi hoàn thành quá trình bundle Tham số

 output: {
    filename: 'bundle.js'
  }

chính là file output của quá trình bundle. 3. Loaders Webpack chỉ có thể xử lý được js nguyên bản nhưng Loader có thể chuyển đổi những tài nguyên khác như .css, .html, .jpg,.. đến những modules mà chúng được thêm trong đồ thị sự phụ thuộc. Chúng có 2 mục đích chính trong config:

Xác định những file nào nên được chuyển đổi bởi loader nào.
Chuyển đổi file đó để làm sao nó có thể thêm vào đồ thị sự phụ thuộc. Để nhúng file css vào app.js trước hết chúng ta phải install style-loader css-loader

npm install style-loader css-loader --save-dev

Thay đổi file webpack.config.js thành:

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
      loaders: [
          { test: /\.html$/, loader: 'html-loader' },
          { test: /\.css$/, loaders: ['style-loader', 'css-loader']},
      ]
  }
};

Chúng ta sẽ nhúng file style.css vào app.js:

#container {
  width: 800px;
  margin: 0 auto;
}
.class-test-webpack {
  text-align: center;
}

Cuối cùng require file css vào app.js:

require('./style.css');
require("sub.js");
document.write("Beginning of project");

Việc nhúng file html hoặc image cũng hoàn toàn tương tự nhúng file css. Lưu ý: Để nhúng image vào js chúng ta sử dụng url-loader

Tài liệu tham khảo: https://viblo.asia/duykhanh/posts/amoG84xoGz8P https://coddingdaily.blogspot.com/2015/09/gioi-thieu-webpack.html

I. Webpack là gì

II. Cài đặt webpack

II. Một số khái niệm quan trọng trong webpack

Mục lục