順便練習一下 yarn 指令。
大致都是照著 神Q超人 這篇文章照著做的: [筆記][React]從零到一的webpack開發環境(2)-React開發篇
我這篇就是懶人包整理，一些之前架設 vue 的 webpack 遇到過的問題就沒有特別寫出來了。
然後有碰到一些問題是我照著做無法順利執行的，有用另外的方式處理。大部分相同。
裝過 node.js 的話可以直接透過以下指令安裝yarn
接下來用到的指令我都會寫使用 yarn 跟使用 npm 的，用 / 隔開。
還沒裝 node.js 的朋友可以參考我這篇的第一點: webpack架設2 – 前置作業，或是神Q大大的超詳細指南: [筆記][node.js]第一次建置node.js開發環境和安裝npm就上手！
執行後會自動創建 package.json，之後所有安裝的依賴都可以在這裡面找到。
// 這一步會自動安裝 node_modules
yarn add webpack-cli -g / npm install webpack-cli -g
-S，表示現在安裝的這個套件，到了正式環境也依然會用到。
--save-dev / -D： 安裝開發時用的工具
--save / -S ： 上線時(正式環境)必要的套件
-g 全域安裝
console.log("Hello world!");
// webpack.config.js
const path = require("path"); //引用path模組
module.exports = {
// 這個webpack打包的對象，這裡面加上剛剛建立的index.js
entry: {
index: "./index.js",
},
output: { // 這裡是打包後的檔案名稱
filename: "bundle.js",
// 打包後的路徑，這裡使用path模組的resolve()取得絕對位置，
// 也就是目前專案的根目錄
path: path.resolve("./"),
},
};
package.json之中新增指令
"scripts": {
"build": "webpack"
},
做到這邊就可以試試打包了。
yarn 可以不打 run
npm 必須要打 run
目前還沒新增 html ，看不到結果總覺得有點空虛，所以新增一個 index.html 吧
第一個webpack網站
<!--這裡只需要嵌入webpack幫我們打包後的js檔就好，這裡指定剛剛output的檔案名稱bundle.js-->
<script src="bundle.js"></script>
打開 index.html 有看到字，F12 有 show 出 console.log，就是沒問題了。
yarn add react-dom --save / npm install react-dom --save
webpack 只看得懂 js，也就是說，react 的 jsx 他看不懂。
要讓 webpack 能夠讀懂非 js 檔案，需要透過 loader。
而要用 jsx 語法，副檔名必須叫做 .jsx
這邊先建立一個測試 jsx 來看看：
// app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
let element =
<h1>Hello, world!</h1>
ReactDOM.render(
element,
document.getElementById('root')
);
index.html 的部分也要做出相應修改，在 body 中新增一個 <div>，令其 id="root"。
<!-- index.html -->
第一個webpack網站
<div id="root"></div>
<!--這裡只需要嵌入webpack幫我們打包後的js檔就好，
這裡指定剛剛output的檔案名稱bundle.js-->
<script src="bundle.js"></script>
這邊安裝的幾個 loaders 是幫助 webpack 能夠辨別 jsx 檔案。
這裡使用--save-dev是因為只有在正式上線前透過 webpack 打包才需要這個 loader，真正上線後已經是打包後的 JavaScript 不會有瀏覽器看不懂的問題。
裝完看一下版本。
根據官方文件，版本8以上的 Babel 核心套件 @babel/core 和版本7的 babel-core 不同，所以務必要確認好自己的版本後再下載對應的核心套件。
版本8以上的對應套件是 @babel/core，所以也要把他下載下來：
有了Babel和他的核心@babel/core外，還要下載針對 JSX 處理的 @babel/preset-react(參考文檔: @babel/preset-react )，webpack 會在打包的時候依照選擇的 preset 把檔案編譯成 JacaScript。
or
npm install @babel/preset-react --save-dev
既然有處理JSX的preset套件，那也會有翻譯ES6語法的preset ( 瀏覽器看不懂 ES6 )，根據官方文件， @babel/preset-env 的用途是和 @babel/preset-es2015 相同的，所以安裝前者。
寫在一起就是兩個都會安裝，可以少打幾個字XD
只是安裝了對應 loader，webpack 還是不知道怎麼打包 js 以外的檔案，這些設定要在 webpack.config.js 的 module.rules 中配置。
const path = require('path'); // 引用path模組
module.exports = {
entry: ['./index.js', './app.jsx'],
// 如果有一個以上的檔案需要打包，可以傳陣列給entry。
output: {
filename: 'bundle.js', // 打包後的檔案名稱
path: path.resolve(__dirname, './dist'),
// 打包後的路徑，這裡使用path模組的resolve()，
// 可以看到其實目前專案裡面還沒有 dist 資料夾。
// 這邊純粹是我習慣把把包完的東西塞進一個特定資料夾，比較整齊。
},
// 將loader的設定寫在module的rules屬性中
module: {
rules: [ // rules的值是一個陣列可以存放多個loader物件
{ // 編譯 JSX
test: /.jsx$/, // 指定編譯檔案的副檔名
exclude: /node_modules/,
// 不編譯的路徑。
// 因為我們不會把node_nodules資料夾放到serve，
// 所以不需要編譯他。
use: { // 指定用來編譯符合副檔名條件的loader
loader: 'babel-loader', // 指定進行編譯的套件
options: {
presets: ['@babel/preset-react', "@babel/preset-env"]
} // 指定loader套件中的presets
}
},
{ // 編譯 ES6
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] },
},
},
{ // 編譯 css 樣式檔
test: /\.css$/,
loader: ["style-loader", "css-loader"]
},
],
},
};
設定完成之後就可以打包看看結果了
好了網頁有了，但是每次調整都要重刷好麻煩。
hot reload 是個好東西，你值得擁有。
可以透過安裝 webpack-dev-server 加上設定來達到這個效果。
設定devServer
// 加在 output 後面 (自己的習慣)
devServer: {
hot: true,
},
hot 設定 hot reload，儲存後重整即可看到效果，不用重新下指令。
port 沒有特別設定的話預設使用8080，如果被占用就使用8081。
目前測試後是 js 與 jsx 檔案都可以即時更新，html 的部分還是需要手動重刷。
但也還可以接受了，畢竟在 react 專案中 html 檔案不太會需要修改。
使用以下指令，跑完就可以得到一個預設 8080 的 localhost server。
英打太慢手殘如我習慣在 package.json 中直接定義。
"build": "webpack",
"serve": "webpack-dev-server"
},
這邊有更動的話記得重新再打包一次。
接著就可以用以下指令在本機架 server 了。
做到這邊差不多就可以開始進行 React 專案開發了，感謝 神Q大大 文章指導與閱讀到這邊的你 =)
題外話，前幾天做了兩個 react 的小作品:
[React] 抽獎小遊戲 陣列渲染實作練習
[React] state練習 可長按設定的進度條
我把這兩個作品都放進了這個剛架好的 webpack 專案了，其實就跟使用 create-react-app 做出來的效果一樣。
code 放在 github了，提供參考。