平時都是用命令列工具一鍵生成專案，沒有機會使用webpack從頭到尾搭建專案。
經過幾天的學習，決定用webpack搭建一個React專案，並將搭建過程記錄下來，與大家一起交流分享。菜雞一枚，如果那裡有錯誤，希望大家幫忙指出。
本篇文章會被分成三章，每一章都有一個主題。
第一章 搭建專案雛形
專案結構
程式碼
初始化專案
mkdir diy-webpack-for-react
cd diy-webpack-for-react
npm init -y
複製程式碼新增.gitignore檔案
node_modules
/dist
.idea
.vscode
複製程式碼初始化git倉庫
git init
複製程式碼安裝webpack
npm i webpack webpack-cli -D
複製程式碼配置webpack.config.js
配置思路
- 配置入口（
entry） - 配置輸出（
output） - 配置各種資源載入的
loader - 使用
HtmlWebpackPlugin將打包後的js入口檔案的指令碼注入到html模板中
安裝依賴
- babel-loader @babel/core @babel/preset-env @babel/preset-react
- style-loader css-loader
- url-loader
- html-webpack-plugin
webpack.config.js程式碼
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 設定為生產（production）模式
// 生產模式預設會將js程式碼壓縮
// 如果你好奇打包後的檔案長什麼樣
// 可以將mode設定為"development"，將devtool設為"none"
mode: "production",
// 設定入口檔案
entry: "./src/index.js",
output: {
// 設定出口檔名
filename: "main.js",
// 設定出口檔案的目錄
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
resolve: {
// 設定擴充套件，這樣匯入檔案時可以省去寫副檔名
extensions: [".js", ".json", ".jsx"]
},
module: {
rules: [
{
// 對".js"或".jsx"結尾的檔案使用babel-loader進行轉譯
// babel-loader的配置放到".babelrc"檔案內
test: /\.jsx?$/,
use: "babel-loader"
},
{
// 對css檔案先後使用css-loader和style-loader
// css-loader可以將匯入專案的css變為js模組
// style-loader可以讓頁面開啟時，利用js將css模組
// 內的樣式注入到html頭部的style標籤內
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
// 使用file-loader來載入圖片檔案
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: "file-loader"
}
]
},
plugins: [
// 該外掛能將生成的入口js檔案注入到模板html內
new HtmlWebpackPlugin({
// 設定模板的路徑
template: "./src/template.html",
// 設定favicon的路徑
favicon: "./src/assets/favicon-32x32-next.png"
})
]
};
複製程式碼配置.babelrc
我們需要配置.babelrc檔案，來告訴babel我們要使用的presets。
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
複製程式碼配置npm指令碼
在npm內新增以下指令碼，方便開發使用
// ...
"scripts": {
"build": "webpack --config webpack.config.js",
"serve:dist": "npx http-server-spa ./dist"
}
// ...
複製程式碼使用 npm run build，打包專案。使用npm run serve:dist,將打包後的檔案跑起來。
結尾
一個簡單的webpack配置完成了。
安裝react和react-dom就可以開始寫程式碼了。
npm i react react-dom
複製程式碼下一章節內容：將配置檔案拆分為webpack.common.js webpack.dev.js webpack.prod.js來針對不同的場景；使用webpack-dev-server啟動開發伺服器；優化生產環境的打包檔案。