Webpack學習系列 - Webpack5 怎麼整合Babel ?

語言: CN / TW / HK

程式設計師優雅哥簡介:十年程式設計師,呆過央企外企私企,做過前端後端架構。分享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)學習結束,期待關注留言分享~~