Vue Loader là plugin webpack cho phép định nghĩa các thành phần Vue trong một tập tin duy nhất, sau đó đóng gói thành module CommonJS để sử dụng trong ứng dụng. Các thành phần này được gọi là Single File Components (SFCs) vì tích hợp HTML, CSS và JavaScript trong cùng một tập tin. Lợi ích chính của phương pháp này bao gồm:

1. Tổ chức mã nguồn rõ ràng hơn khi mỗi thành phần chứa đầy đủ logic, giao diện và kiểu dáng.
2. Hỗ trợ ngôn ngữ nâng cao như SCSS, TypeScript thông qua hệ sinh thái loaders.
3. Tận dụng tối đa các tính năng Vue.js như CSS có phạm vi tác động, đăng ký thành phần cục bộ.

Cấu hình Vue Loader trong webpack rất đơn giản bằng cách thêm đoạn sau vào file cấu hình:

module.exports = {
  module: {
    rules: [
      // ...các quy tắc khác...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

Sau khi cấu hình, bạn có thể tạo các thành phần SFC theo cú pháp đặc trưng như ví dụ sau:

<template>
  <div class="chao">
    {{ tinNhan }}
  </div>
</template>

<script>
export default {
  name: 'ThongBao',
  data() {
    return {
      tinNhan: 'Chào mừng bạn!'
    }
  }
}
</script>

<style scoped>
.chao {
  color: blue;
}
</style>

Trong ví dụ trên, <template> chứa giao diện người dùng, <script> định nghĩa logic và <style> quản lý kiểu dáng. Thẻ <script> sử dụng export default để xuất đối tượng định nghĩa thành phần bao gồm tên, dữ liệu và phương thức.

Khi được xử lý bởi Vue Loader, thành phần này sẽ được đóng gói thành module CommonJS và sử dụng như sau:

import ThongBao from './ThongBao.vue'

new Vue({
  el: '#app',
  components: { ThongBao },
  template: '<ThongBao/>'
})

Ngoài việc đóng gói thành phần, Vue Loader còn hỗ trợ nhiều khả năng mở rộng như:

1. Biên dịch ngôn ngữ tiền xử lý CSS bằng sass-loader, less-loader, stylus-loader.
2. Hỗ trợ TypeScript thông qua ts-loader.
3. Tối ưu JavaScript bằng Babel thông qua babel-loader.
4. Xử lý tài nguyên tĩnh như hình ảnh bằng url-loader/file-loader.
5. Áp dụng CSS modules bằng thuộc tính module trong thẻ style.

Vue Loader cung cấp hàng loạt tùy chọn cấu hình linh hoạt, là công cụ không thể thiếu trong hệ sinh thái Vue.js giúp tối ưu hóa quy trình phát triển thành phần với công cụ hiện đại.