[#365blog] 寫 React 不用崩潰,Webpack 入門起手式

Badu Huang
Mar 25 · 6 min read

在前面幾篇,寫到了 React 通常標配就是 ES6 ,然而,這些語法瀏覽器是看不懂的,意思就是你認真的搞懂了 ES6 怎麼寫, 已經能起手式寫 React Component 與傳值了,你才剛感到「阿~我真是個有用的人R」,開心地把這些程式碼放到瀏覽器上,就發現悲劇!瀏覽器居然看不懂…而這就是為什麼我們需要學習與克服 Webpack 的原因。

Webpack 在做的事情其實就是幫你把你寫的 React 程式碼翻譯翻譯,然後確保它被打包成瀏覽起看得懂的檔案,打包後會長得很混亂,我們也不見得全部看得懂,但總而言之,這一包傳上網使用者才看得到畫面。

在開始複習 Webpack 以前,先讓我崩潰一下,哀哀哀哀哀哀哀哀哀= =

Webpack 起手式 — 先安裝 node.js

要怎麼讓 Webpack 裝到我的程式檔案中?Webpack 本身是在 node.js 上運行的,所以開始前先安裝個 node.js

安裝後可以在終端機上打這行指令:

node -v 

意思就是 node 的 version,可以看看你安裝的版本是什麼。

安裝 npm & Webpack

接下來終端機移動到你的檔案根目錄位置,並打這行指令:

npm i webpack webpack-cli

npm i +你的套件包名稱的意思是,你把這行指令跑完後,會產生一個 package.json 檔,並會自動在你的 package.json dependencies 寫入你剛剛裝的套件。

package.json 裡頭寫的,基本上就是你的整包檔案所有的套件版本資訊,你要啟動整包檔案或是打包整包檔案所需的 npm 指令也都會寫在這裡。(安裝後你可能會看到一個 package-lock.json 檔,裡頭有更詳細的安裝套件內容,通常不需要去修改。)

本機開發 & 正式開發

以下的指令會啟動的是在 package.json 中的 scripts 裡頭的東西:

npm run start // 本機開發npm run build // 正式開發

Webpack 的程式進入點

Webpack 作為一個打包工具,它是有自己的規則的,首先一定要記得的是,Webpack 的編譯會是從一支 JS 檔案進入,我們會在這支 JS 檔案用 JavaScript 讓 Webpack 知道它要編譯哪些東西,最後再打包成一包檔案。

編譯前,我們會把所有 ES6、JSX 等檔案都會放到一個叫做 src 的資料夾,而經過編譯後的檔案則會放到 dist 資料夾,dist 資料夾的東西才是我們實際要放到瀏覽器上的。

建立 Webpack.config.js(以下都是 node.js )

我們需要在根目錄建一個 webpack.config.js 檔,並在 src 建一個 index.js檔(這就是我們的進入點)。

const path = require('path');module.exports = {
entry: './src/index.js',
mode: 'development',
devtool: 'hidden-source-map',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
};

entry 是我們的進入點,在這裡是 index.js。
mode 只能是 development 或 production。
devtool: ‘hidden-source-map’ 通常用在開發階段,要看編譯後的原始碼,production 時就不用了,而不要產生 source 就用 devtool:’ ’。
output 是打包後的檔案。

打包你的第一個 js 檔案

你可以在程式進入點(index.js 這個檔案) 寫點東西,然後記得在 package.json 檔中的 script 的 “build” 加上 “webpack”。

在終端機打 npm run build,成功編譯的話,你會有一個 bundle.js 的打包檔案。

ES6 module

接下來談談程式進入點 index.js 的 ES6 module 寫法:

var message = 'hi es6 module'; function privateFun(){
console.log(‘this is privet function’);
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
class MyClass {
foo(){
console.log('foo');
}
}

export default MyClass;

有在其他檔案引用到的函式要用 export,一個 JS 檔案可以有無數的 export,但一支 JS 檔案只能有一個 export default(優先權先寫這個)。

要引用就用 import,此外 import…from 要寫相對路徑,有{ } 表示要抓特定的 function ,沒有 {} 就只是要抓 default 的。

整合的寫法會像是這樣:

import MyClass, { multiply, divide } from "./util/es6";

還沒結束,你還需要 Loader

在使用 Webpack 時,如果我們要引用 JS 檔以外的檔案(比如 JSX, css, pug, sass 等等),我們就會需要用到 Loader。我們之前說過了,在 React 裡寫 JSX 這個語法糖,瀏覽器一樣看不懂…而這時候我們就需要 Babel 來翻譯翻譯,所以我們會需要在 Webpack.config.js 引用 Babel Loader,才能轉譯 JSX,正確處理 JavaScript 的編譯。

一個 Loader 只處理一個資料型態,恩…意思就是這樣,你要在 Webpack 引用 CSS 檔案當然可以,但就是要用另一個名為 css-loader 的 Loader。

這邊只示範 Babel Loader,首先先起手式安裝它:

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader

安裝完會看到根目錄有 .babelrc 檔案。

Webpack.config.js 要這樣寫

const path = require(‘path’);
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
},
// 只找這個資料夾下的檔案,可以加速 webpack 打包
include: [path.resolve('src')],
// 排除文件,加速 webpack 打包
exclude: /node_modules/,
},
]
},
};

Webpack 決定檔案要用什麼東西處理就是在 rule 那邊,寫完後你才能 npm run start 看看是否有成功轉譯 JSX。

如果寫 path.resolve(‘src’) → 之後 import 可以不給相對路徑就直接找這些檔案。

No Sugar Code

Daily Research & Insights

Badu Huang

Written by

https://baduhuang.xyz

No Sugar Code

Daily Research & Insights

More From Medium

More on Code from No Sugar Code

More on Code from No Sugar Code

More on Code from No Sugar Code

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade