Webpack là một công cụ hữu ích và có rất nhiều các tính năng độc nhất.

Cung cấp một cấu hình cho webpack không phải là vấn đề gì khó khăn cho các dự án từ trung bình đến lớn.

Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về cách cài đặt và cấu hình webpack 4.

Bắt đầu cài đặt dự án

Tạo một thư mục mới và di chuyển vào trong nó

mkdir webpack-4-quickstart && cd $_

Khởi tạo package.json bằng cách chạy

npm init -y

Và tiến hành cài đặt webpack 4

npm i webpack --save-dev

Chúng ta cũng cần webpack-cli, cài như một gói riêng biệt

npm i webpack-cli --save-dev

Tiếp theo mở file package.json và thêm vào đoạn script chạy build

"scripts": {
  "build": "webpack"
}

Đóng và save file lại

Thử chạy build xem sao

npm run build

và một lỗi trả về như sau

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

Webpack 4 đang tìm kiếm một entry point trong ./src. Tóm tắt thì entry point là file mà webpack tìm kiếm để bắt đầu build các file javascript đóng lại

Trong các version webpack trước thì entry point phải được định nghĩa trong file cấu hình webpack.conf.js

Bắt đầu từ webpack4 không cần định nghĩa entry point: Nó sẽ nhận ./src/index.js như mặc định

Để sửa lỗi trên hết sức đơn giản, tạo ./src/index.js với nội dung như dưới đây

console.log(`I'm a silly entry point`);

và thử chạy build lại

npm run build

Bạn sẽ nhận được một file bundle trong ~/webpack-4-quickstart/dist/main.js

Nghĩa là chúng ta không cần định nghĩa output? Chính xác!

Trong webpack4 chúng ta không cần định nghĩa file entry point cũng như file output

Điểm mạnh chính của webpack là chia tách code. Nhưng tin tôi đi, công cụ không cần cấu hình giúp tăng tốc mọi thứ.

Đây là điểm mới của webpack4:  webpack 4 không cần file cấu hình

Nó sẽ coi file entry point trong ./src/index.js và nó sẽ tạo ra file bundle trong ./dist/main.js

Chế độ production và development

Có 2 file cấu hình là thông thường trong webpack

Một kiểu project có thể có:

• Một cấu hình file cho development, để định nghĩa môi trường dev cho webpack và những thứ khác
• Một cấu hình file cho production, để định nghĩa UglifyJSPlugin, sourcemaps và vv …

Mặc dù các dự án lớn hơn vẫn cần 2 file cấu hình, trong webpack4 chúng ta có thể cấu hình nó mà không cần một dòng cấu hình

webpack4 giới thiệu chế độ development và production

Trong thực tế nếu bạn để ý sau khi chạy lệnh npm run build, bạn sẽ nhìn thấy cảnh báo như sau

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

Làm thế nào để khắc phục cảnh báo này?

Mở file package.json và cập nhập lại script như sau

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Nào thử chạy lại

npm run dev

Và hãy cùng kiểm tra ./dist/main.js. Bạn sẽ vẫn thấy file bundle và không được minify

Tiếp theo hãy thử chạy

npm run build

Kiểm tra ./dist/main.js. Bạn sẽ vẫn thấy file bundle và được minify

Chế độ production cho phép tất cả các tối ưu hoá ra khỏi hộp. Bao gồm minify, hoisting, tree-shaking…

Mặt khác, chế độ development được tối ưu cho tốc độ, và không làm gì khác ngoài việc cung cấp một file bundle chưa được minify

Trong webpack 4 bạn không cần phải cấu hình một dòng nào trong file cấu hình. Chỉ cần định nghĩa cờ --mode

Ghi đè mặc định entry/output

Cấu hình trong file package.json

Đây là ví dụ

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

Chuyển đổi ES6 bằng babel 7

Javascript ngày này hầu hết được viết trong ES6

Nhưng không phải tất cả các browser đều có thể hoạt động với ES6. Chúng ta cần thực hiện chuyển đổi nó

Bước chuyển đổi này được gọi là transpiling. Nó giúp chuyển đổi ES6, giúp cho các trình duyệt cũ hơn có thể hiểu được

Webpack không biết cách làm thế nào để chuyển đổi nhưng có các loader: Nghĩ về về chúng như là máy biến hình

babel-loader là một webpack loader giúp chuyển đổi ES6 hoặc mới hơn xuống thành ES5

Để sử dụng loader chúng ta cần cài đặt các dependency

• babel core
• babel loader
• babel preset env để biên dịch Javascript ES6 code xuống thành ES5

Cài như sau

npm i @babel/core babel-loader @babel/preset-env --save-dev

Tiếp theo cấu hình webpack bằng cách tạo file .babelrc trong thư mục dự án

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

Ở đây, chúng ta có 2 lựa chọn để cấu hình babel-loader:

• Sử dụng một file cấu hình cho webpack
• sử dụng --module-bind trong npm script

Bạn có thể nghĩ rằng webpack 4 giống như một công cụ không cần file cấu hình vậy tại sao chúng ta phải sử dụng lại file cấu hình?

Hiện tại mặc định webpack mà không cần cài đặt cấu hình như sau

• Entry point mặc định ./src/index.js
• output mặc định ./dist/main.js
• Chế độ production và development

Nhưng nó là tất cả những gì webpack 4 hỗ trợ. Nhưng để sử dụng các loader trong webpack 4 chúng ta vẫn phải tạo một file cấu hình

Hiện tại, chúng ta vẫn dựa trên file webpack.conf.js

babel-loader trong file cấu hình

Cung cấp cho webpack một file cấu hình để sử dụng babel-loader theo cách thông thường

Tạo một file mới webpack.conf.js trong thư mục dự án và cấu hình loader như sau

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

Không cần chỉ định entry point trừ khi bạn muốn chỉnh sửa nó

Tiếp theo mở file ./src/index.js và thử viết một vài đoạn code sử dụng ES6

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

Cuối cùng, chạy lại build

npm run build

Nào hãy mở file ./dist/main.js để kiểm tra đoạn code được chuyển đổi

Sử dụng babel-loader không cần file cấu hình

Có một cách khác sử dụng các loader của webpack

Sử dụng cờ --module-bind cho phép chúng ta chỉ định các loader từ command line. Chúng ta có thể chỉ định các cờ từ webpack version 3

Chúng ta có thể sử dụng babel-loader không cần file cấu hình như sau trong file npm package.json

"scripts": {
  "dev": "webpack --mode development --module-bind js=babel-loader",
  "build": "webpack --mode production --module-bind js=babel-loader"
}

Bạn có thể chạy thử lại và kiểm tra kết quả. Nhưng tôi không thích cách này cho lắm nhưng dù sao nó cũng rất thú vị

Như vậy tôi đã giới thiệu lại qua cho bạn cách cài đặt và cấu hình webpack sử dụng babel loader. Trong phần tiếp theo chúng ta sẽ cùng nhau áp dụng nó cho dự án sử dụng reactJS và vueJS