WEBPACK

• Webpack là gì? Tại sao phải sử dụng Webpack Là 1 cách để đóng gói các module bundler đơn lẻ, nó tạo ra các modules với các dependencies và tạo ra các assets tĩnh đại diện cho các module này.
• Sử dụng Webpack với HTML source/Phaser được không?

npm install webpack - g

• Tạo source (index.html và bundle.js)
• chạy lệnh để bundle app

webpack ./app.js bundle.js

• Khai báo file config

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

• entry: tạm hiểu như là 1 FILE khởi tạo đầu tiên (có thể là file đơn lẻ hoặc mảng các file) - mà chúng ta cần nhúng vào và build.
• output: là 1 file file đối tượng chứa tất cả cấu hình output.
• Chạy app

webpack

Sau khi đã tạo file webpack.config.js chúng ta có thể sử dụng lệnh webpack như trên.

• ------- Watchmode ------- Có tác dụng 'watch' các files và một khi các files thay đổi, nó lập tức build lại và tạo lại các các file output.
• Có 2 cách để bật chế độ watchmode
• Sử dụng command line

webpack --watch

• Go vào file config, và thêm key gọi là watch và đặt là "true"

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
  watch: true
}

• ------- Webpack Dev Server -------

Webpack có 1 web server được gọi là webpack-dev-server Từ command line, chúng ta cài đặt webpack-dev-server cho globally:

npm install webpack-dev-server -g

• Sau khi cài đặt server chúng ta có thể vào folder web app và chạy lệnh

webpack-dev-server

• Sau khi chạy có thể vào server với link sau, tùy port của chúng ta khi chạy thì có thể thay "8080" thành port tương ứng của bundle

localhost:8080

• Để xem log của Webpack có thể truy cập như sau để xem

http://localhost:8080/webpack-dev-server/

• Có thể kết hợp với React.

• Guide to Webpack - bài viết ở medium rất chi tiết về cách sử dụng và các tính năng của webpack
• Getting Started with Webpack Module Bundling - bài viết ở Scotch.io cũng rất dễ hiểu
• Guide for Webpack - Starter for Webpack

• [Sublime Text] - Light weight editor and easy to code and hightlight your work.
• [Atom] - Powerful code editor now with thoundsand of plugins.

Free Software, Hell Yeah!