Tìm hiểu Webpack: Cài đặt cơ bản

Giới thiệu

Có lẽ viết về task runner hay bundlers trong front-end development là điều không còn mới mẻ nữa. Mình viết series về webpack lần này sẽ không đề cập quá nhiều đến những khái niệm, nhưng tập trung vào việc cấu hình, giải quyết những tình huống thực tế.

Đây sẽ là những bài viết ngắn và đương nhiên không có tag TL;DR =))

Cài đặt căn bản

mkdir webpack-demo
cd webpack demo
npm init -y
yarn add webpack -D
yarn add webpack-cli -D

tiếp theo chúng ta tạo file index.htmlsrc/index.js với nội dung như bên dưới.

src/index.js
import Vue from "vue";
new Vue({
  data: {
    msg: "12bit.vn"
  },
  render: function(h) {
    return h("h1", this.msg);
  }
}).$mount("#app");

index.html
<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./dist/index.js"></script>
  </body>
</html>

Nếu bạn sử dụng src/index.js trong html thì chắc chắn sẽ không thấy kết quả gì cả vì trình duyệt không tương thích với dạng module như chúng ta viết bên trên. Chính vì vậy mới cần tới bundler để có thể compile.

Bây giờ chúng ta sẽ build thử bằng cách chạy command line sau:

./node_modules/.bin/webpack
# hoặc
npx webpack # yêu cầu node 8.2+ và npm 5.2.0+

Sau khi gõ lệnh bạn sẽ thấy output như sau:

npx webpack

...
Built at: 04/06/2019 9:38:49 PM
  Asset      Size  Chunks             Chunk Names
main.js  68.8 KiB       0  [emitted]  main
...

Mặc định file main.js sau khi build sẽ nằm trong thư mục dist. Chính vì vậy mà trong file html chúng ta trỏ tới ./dist/main.js

Chúng ta có thể thay đổi output thông qua webpack.config.js mình sẽ đề cập tiếp tục ở bài sau
:tada:

:tada:

Kết luận

Vậy là chúng ta đã đi qua phần căn bản nhất, như vậy là đủ cho bài này rồi 😂. Bài tiếp theo chúng ta sẽ cùng tìm hiểu về webpack.config.js, thêm scripts để build trong package.json.

Tags:

Sửa lần cuối bởi Duoc Nguyen vào ngày 16-04-2019: xem commit, bài lỗi? sửa ngay
Cảm ơn các bạn đã đóng góp vào bài viết này:
Duoc Nguyen
Thien Nguyen

Đăng ký nhận email từ 12bit.vn

Để không bao giờ bỏ lỡ bất cứ điều gì hay ho.

Bình luận

Hỗ trợ markdown