[JavaScript] Webpack cơ bản phần 2

Chào các bạn, lại là mình đây, mình làm tiếp phần 2 này chủ yếu để các bạn kéo phần 1 đỡ mỏi tay. Chúng ta tiếp tục nào : à các bạn cấu hình xong có thử chạy chưa nhỉ , nếu chưa chạy được thì mình dừng ở đây và chạy thử để xem thử thành quả suốt từ phần 1 nhé : Chúng ta mở file webpack.config.js và thêm mới đoạn code này :

 const path = require("path"); // import path

module.exports = {
  entry: "./src/index.js", // đường dẫn đến file index.js cần bundle.
  output: {
    path: path.join(__dirname, "/dist"), // thư mục chứa file bundle.
    filename: "index_bundle.js" // tên file bundle.
  }
}

Mình setup để gõ nhanh câu lệnh của webpack, chúng ta mở file package.json để sửa lại 1 chút :

{
    ...
    "scripts": { // ở ngay đây trong package.json
        "develop": "webpack --mode development", // thêm 
        "build": "webpack --mode production" // thêm
    },
    ...
}

với cách setup này chúng ta sẽ chạy webpack ở 2 chế độ development và production. tiếp theo, hãy tạo 1 file đúng với entry mình cấu hình trên webpack

// tạo mớithư mục src trong dự án của bạn nếu chưa có và tạo 1 file index.js
// trong file index đó bạn hãy thử gõ console.log('hello webpack');
entry: "./src/index.js", // đường dẫn đến file index.js cần bundle.

Mở command line và gõ : npm run develop , chạy webpack với mode development đúng như đã cấu hình trong package.json. Sau khi chạy xong, sẽ thấy trong project của bạn có thêm 1 thư mục tên dist và 1 file tên index_bundle.js đúng như chúng ta đã cấu hình trong webpack.config.js. mở file index_bundle.js và copy toàn bộ code đó, bạn mở chrome lên bật f12, nhảy qua tab Console và paste toàn bộ code vào để chạy thử và so sánh kết quả nhé.

Chúng ta chạy thử lệnh tiếp lệnh npm run build, chạy webpack với mode production đúng như đã cấu hình trong package.json, mở file index_bundle.js lên và so sánh với file index_bundle.js khi chạy lệnh npm run develop.

=> khi chạy webpack với mode production, file khi bundler sẽ được minified lại và xóa hết các comment, size file chắc chắn sẽ nhỏ hơn.

Nhưng khi mình chỉnh sửa 1 tí thì cứ phải gõ lại lệnh npm run ....

    // mở file package.json và sửa lại như sau.
   // thêm --watch, khi có sự thay đổi trong code, nó sẽ chạy lại.
  "develop": "webpack --mode development --watch", 

chạy lại lệnh npm run develop để cảm nhận .

Babel Loader

Tiếp theo, dự án mình làm Reactjs nên trong file index.js đã nói ở trên sẽ như sau :

import React from 'react'

export default function index() {
    return (
        <div>
            Hello Webpack
        </div>
    )
}

chạy webpack với câu lệnh npm run develop, xuất hiện lỗi, theo mình hiểu lỗi này là vì nó không đọc được chuẩn ES6, nên ta phải chuyển định dạng từ ES6 về ES5. Vậy ta sẽ dùng Module loaders để thực hiện việc này. Mở webpack.config.js và thêm vào :

 const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  // Phần chúng ta sẽ thêm vào 
  module: { // khai báo và cấu hình Module cần sử dụng.
    rules: [
      {
        test: /.js$/, // áp dụng với chỉ file có định dạng js
        exclude: /node_modules/, // Module sẽ bỏ qua thư mục node_modules 
        use: {
          loader: "babel-loader" // Module sử dụng babel-loader.
        },
      },
    ]
  }
  // đến đây
}

babel-loader : Thành phần này sẽ giúp các babel khác làm việc được với webpack. Vậy nên ta sẽ có thêm 1 file .babelrc để cấu hình cách transpile của babel và xác định babel loader webpack sử dụng, Các bạn sẽ thêm đoạn code này vào file .babelrc.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Bài này mình sẽ không đi sâu vào babel nên tạm thời sẽ vậy, chức năng của preset-env và preset-react các bạn có thể xem lại bài Phần 1 .

Sau đó lưu file lại và chạy lại câu lệnh npm run develop.

SASS Loader

Mình thêm 1 file style.scss, định dạng là scss.

.bg--red{
    background-color: red;
}

và index.js mình sẽ import style.scss.

import React from 'react';
// import thêm style.scss
import './style.scss';

export default function index() {
    return (
        <div className='bg-red'>
            Hello Webpack
        </div>
    )
}

Tại sao mình lại import file scss vào 1 file js kiểu vậy ?

• Một component ReactJs có thể sẽ phụ thuộc vào css, nếu ta đóng thành 1 cục, dễ dàng mang đi sử dụng nơi khác.
• Nếu chúng ta không sử dụng component này, thì đoạn css được import trong component này cũng sẽ không được sử dụng luôn, tránh việc load dư thừa css.
• Nếu có bất kì thay đổi trong css của component này sẽ không ảnh hưởng đến giao diện component không được import file css.

chạy webpack với câu lệnh npm run develop, xuất hiện lỗi. bạn có thể thấy webpack nó không hiểu scss, mà nếu định dạng là css, nó cũng bị lỗi mà thôi vì webpack chỉ làm việc thuần với javascript, Vậy trước tiên cài một số loader để làm việc với SASS :

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

sau khi install thành công, chúng ta mở webpack.config.js để thêm những moduler loader này.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: { 
    rules: [
      {
        test: /.js$/, 
        exclude: /node_modules/, 
        use: {
          loader: "babel-loader"
        },
      },
      // Thêm multi module loader 
      {
        test: /.scss$/, // chỉ làm việc với file có định dạng scss
        use: ["style-loader", "css-loader","sass-loader"] // danh sách module loader 
       }
    ],
  }
}

Các loader module này sẽ được thực hiện theo thứ tự :

• sass-loader : chuyển đổi Sass thành CSS.
• css-loader : load và đóng gói CSS vào JavaScript
• style-loader : chèn CSS vào bên trong thẻ <style> trong code.

Mai viết tiếp ....