Webpack學習系列 – Webpack5 怎麼集成Babel ？

• 2022 年 7 月 22 日
• 筆記
• VUE, webpack 5, 前端

程式設計師優雅哥簡介：十年程式設計師，呆過央企外企私企，做過前端後端架構。分享vue、Java等前後端技術和架構。
本文摘要：主要通過實操講解運用Webpack 5 如何集成 Babel

Babel 對於前端開發來說是不可缺少的一部分，用於將 ES6 或更高版本語法編寫的程式碼轉換為向後兼容的 JavaScript 語法。關於 Babel 的詳細介紹，參考《Babel》一文。本文詳細介紹如何在 webpack 5 中集成 Babel。

1 安裝依賴

webpack 使用 loader 的方式集成 babel，安裝 babel-loader 有關的依賴：

yarn add babel-loader @babel/core @babel/preset-env -D

2 添加 babel 配置文件

在根路徑下創建 babel 的配置文件： babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}

上面僅配置了預設（智慧預設，可以編譯 ES6 的語法）

3 修改 webpack 配置

修改 webpack.config.js，添加babel-loader來處理JS文件：

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

exclude 屬性表示排除，及滿足 exclude 正則表達式的文件不使用這個loader進行處理。

4 測試運行

在配置babel-loader之前，可以在打包後的 bundle.js 文件中看到箭頭函數等 ES6 的語法。配置後重新執行 yarn build 打包，查看 bundle.js 文件，裡面 ES6 的語法都轉為了 ES5，說明 babel 配置生效。

今日優雅哥（youyacoder）學習結束，期待關注留言分享~~