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

前言

由於我們平常撰寫 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

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ