EP 5 - 關於 Webpack 學習這件小事之bebal

發表於 更新於 分類於
由於我們平常撰寫 JavaScript 的時候，都必須顧慮每一個瀏覽器的支援性問題，所以這邊要來記錄替 Webpack 加入 Bebal 這個編譯神器工具，它可以幫助我們將我們所撰寫的 JavaScript 編譯成所有瀏覽器可以支援的 JavaScript

前言

由於我們平常撰寫 JavaScript 的時候，都必須顧慮每一個瀏覽器的支援性問題，所以這邊要來記錄替 Webpack 加入 Bebal 這個編譯神器工具，它可以幫助我們將我們所撰寫的 JavaScript 編譯成所有瀏覽器可以支援的 JavaScript

起手式

首先我們必須替 Webpack 專案安裝 Bebal 套件

1
npm install babel-loader @babel/core @babel/preset-env --save-dev

接下來我要來調整一下資料夾結構

資料夾結構

設置 webpack.config.js

由於我們將原本的 JavaScript 進入點做了調整，所以這邊就要開啟 webpack.config.js 做一些修正，也順便把 Bebal 設置也寫入

首先是 JavaScript 部分

Image

接下來加入 Bebal 編譯設置

1
2
3
4
5
6
7
8
9
10
 {
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
    }
  }
}

Bebal

接下來就實際進去寫一下 JavaScript 看看吧~

1
2
3
4
5
console.log('Webpack HelloWorld2');

const hello = (name) => console.log(`Hello ${name}`);

hello('bebal');

JavaScript

首先我們可以先開啟 Web Server 看有沒有正常出來

Web Server

接下來在來做打包看看打包的結果如何，只需要輸入 webpack -p，打包完畢後就可以打開程式碼來看囉~

webpack