Vue.js 是一款開源的 JavaScript 框架，因其簡單易用、高效靈活而廣受歡迎。Vue.js 可以通過編寫高質量的可復用組件來快速構建交互式的用戶界面。

Vue.js 的組件開發模式讓我們可以定義一個組件類，在組件中通過 template 定義組件的 UI，通過 data 定義組件的狀態，通過 methods 定義組件的行為。但是，為了讓我們的代碼更兼容不同的瀏覽器環境，我們需要使用 babel 將我們的代碼編譯為可執行的 JavaScript 代碼。

// 安裝 babel-loader 和 babel-core
npm install babel-loader babel-core --save-dev
// webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}

如上代碼，我們在 webpack.config.js 中添加了一條規則，通過 babel-loader 將 js 文件編譯成可執行的 JavaScript 代碼。

@babel/preset-env 是 babel 提供的一個預設集合，可以根據我們當前瀏覽器的環境，自動編譯出最適合當前環境的可執行 JavaScript 代碼。這樣，我們就不需要手動配置每個不同環境所需的插件，可以大大減少我們的工作量。

除此之外，babel 還提供了許多其他的插件和預設，可以幫助我們在 webpack 中更好的編譯我們的 JavaScript 代碼。