使用webpack5從0到1搭建一個react專案的實現步驟
前言
在這之前，每開始一個新專案我都是使用現有的腳手架，這非常便於快速地啟動一個新專案，而且通用的腳手架通常考慮地更加全面，也有利於專案的穩定開發；不過對於一個小專案，根據需求自己搭建可能會更好，一方面小專案不需要腳手架那麼豐富的功能，另一方面可以提高對專案的掌控度以方便後期的擴充套件。
這篇文章是在實踐中總結的，具有實操性，讀者可跟著一步步進行搭建，中間我會穿插一些原理，當然因為筆者的能力有限，不會特別深入。
預備知識
- 熟悉Javascript && HTML && CSS
- 熟悉ES6+
- 有能力搭建Nodejs環境
- 會用命令列
目標
學習使用webpack5和為什麼使用它
用webpack5搭建生產環境
什麼是webpack
這有點老生常談了，不過為了新同學能夠看下去，在這裡簡單介紹一下。一個現代化的web應用，已經不是單純地優html、css、javascript組成的，它還需要對應用進行打包、壓縮和編譯成瀏覽器能夠理解的程式碼，於是webpack就開始流行起來了。
webpack是一個模組打包器，它可以打包任何東西。你可以在開發時使用最新的Javascript特性或Typescirpt，webpack會將它編譯成瀏覽器支援的程式碼並壓縮它；你還可以在Javascript中匯入需要用到的靜態資源。
在開發過程中，webpack提供了開發伺服器並支援HMR，什麼是HMR和怎麼配置後面會詳細介紹，現在我們只要知道當我們儲存程式碼的時候webpack會幫我們自動重新編譯和重新整理瀏覽器。
webpack的能做的遠不止這些，這篇文章主要是幫助你熟悉基本概念和如何去配置自己的腳手架。
開始搭建
這篇文章算是一個較為完整的實戰教程，目標是搭建一個可用的腳手架，在此基礎上可以擴展出更多的功能。
架構需要支援的特性
- Webpack5
- 命令列友好提示
- es6+
- React
- Typescript
- PostCSS + cssnext
- HMR
安裝webpack
新建一個專案，進入專案根目錄，建立預設的package.json
yarn init -y
安裝webpack和webpack-cli
- webpack - 模組打包庫
- webpack-cli - 命令列工具
yarn add webpack webpack-cli -D
基礎配置
在根目錄下新建一個webpack.config.js
Entry
入口檔案，webpack會首先從這裡開始編譯
// webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},}
Output
定義了打包後輸出的位置，以及對應的檔名。[name]是一個佔位符，這裡是根據我們在entry中定義的key值，即等價於app
module.exports = {
/* ... */
output: {
path: path.resolve(__dirname,'./dist'),filename: '[name].bundle.js',},}
確保src下有index.js，然後現在可以使用我們的最小化配置進行打包。在package.json中加入以下程式碼
"scripts": {
"build": "webpack"
}
執行該命令
yarn run build
可以在命令列中看到打包的結果，並且在根目錄下生成了一個dist目錄，說明打包成功。
Plugins
外掛使webpack具備可擴充套件性，可以讓我們支援更多的功能。
模板檔案
當我們構建一個web app的時候，我們需要一個HTML頁，然後再HTML中引入Javascript，當我們配置了打包輸出的bundle檔案是隨機字串時，每次手動更新就特別麻煩，所以最好的方法是可以自動將bundle打包進HTML中。
Html-webpack-plugin - 從模板生成一個HTML檔案
安裝
yarn add html-webpack-plugin -D
在根目錄下新建一個檔案public/index.html，內容如下
<!DOCTYPE html> <html lang="en"> <head> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="root"></div> </body> </html>
其中title是讀取html-webpack-plugin外掛的配置，配置如下
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
/* ... */
plugins: [
new HtmlWebpackPlugin({
title: '鐵木真大屏展示',template: path.resolve(__dirname,'./public/index.html'),filename: 'index.html',}),],}
現在我們再次執行yarn run build，可以看到dist下多了一個index.html，其中自動插入了標題和script，效果如下
打包前清除dist
clean-webpack-plugin - 打包前移除/清理 打包目錄
安裝
yarn add clean-webpack-plugin -D
配置
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
/* ... */
plugins: [
/* ... */
new CleanWebpackPlugin(),}
命令列友好提示
安裝
yarn add friendly-errors-webpack-plugin -D
配置
// webpack.config.js
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
plugins: [
new friendlyErrorsWebpackPlugin(),]
}
Loaders
webpack使用loaders去解析模組，webpack想要去如何理解Javascript、靜態資源（圖片、字型、css）、轉移Typescript和Babel，都需要配置相應的loader規則。
在專案中只有一個HTML和一些Javascript是沒什麼用的，我們還需要webpack能夠做一些事：
- 將最新的Javascript特性編譯成瀏覽器理解的
- 模組化CSS，將編譯SCSS、cssnext編譯成CSS
- 匯入圖片、字型等靜態資源
- 使用自己喜愛的框架，如React
Babel
Babel 是一個 JavaScript 編譯器，能將 ES6 程式碼轉為 ES5 程式碼，讓你使用最新的語言特性而不用擔心相容性問題，並且可以通過外掛機制根據需求靈活的擴充套件，我們需要先安裝以下庫
yarn add babel-loader @babel/core -D
- babel-loader - 使用Babel和webpack轉譯檔案
- @babel/core - 轉譯ES2015+的程式碼
配置如下
// webpack.config.js
module.exports = {
/* ... */
module: {
rules: [
// JavaScript
{
test: /\.m?js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env'],}
在 Babel 執行編譯的過程中，會從專案根目錄下的配置檔案讀取配置。在根目錄下建立Babel的配置檔案babel.config.json
{
"presets": ["@babel/preset-env"]
}
如果未安裝@babel/preset-env需要先安裝
yarn add @babel/preset-env -D
圖片和字型
解析圖片的loader配置
module.exports = {
/* ... */
module: {
rules: [
// Images
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,type: 'asset/resource',}
解析字型檔案的loader配置
module.exports = {
/* ... */
module: {
rules: [
// Fonts and SVGs
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,type: 'asset/inline',}
樣式
現在我們希望能夠在Javascript中匯入CSS，以及將CSS注入DOM，另外還想使用CSS的高階特性，如cssnext，需要依賴一下庫
- css-loader - 解析CSS匯入
- style-loader - 將CSS注入DOM
- postcss-loader - 用PostCSS處理CSS
- postcss-preset-env - PostCSS的預設配置
- postcss - PostCSS 是一個允許使用 JS 外掛轉換樣式的工具。 這些外掛可以檢查（lint）你的 CSS，支援 CSS Variables 和 Mixins， 編譯尚未被瀏覽器廣泛支援的先進的 CSS 語法，內聯圖片，以及其它很多優秀的功能。
- postcss-next - PostCSS的外掛，可以使用CSS最新的語法
安裝
yarn add css-loader style-loader postcss-loader postcss-preset-env postcss postcss-cssnext -D
新建PostCSS配置檔案postcss.config.js，配置如下
module.exports = {
plugins: {
'postcss-preset-env': {
browsers: 'last 2 versions',}
配置loader
// webpack.config.js
module.exports = {
/* ... */
module: {
rules: [
// CSS,PostCSS,and Sass
{
test: /\.(scss|css)$/,use: ['style-loader',{
loader: 'css-loader',options: {
importLoaders: 1,'postcss-loader'],}
開發環境
讓我們從設定配置為開發模式開始，表示當前的配置的配置為開發環境的配置
// webpack.config.js
module.exports = {
mode: 'development',// ...
}
使用source maps
為了在報錯的時候更好的追蹤程式碼和給出錯誤程式碼出現的地方的提示，我們可以使用source map，配置如下
// webpack.config.js
module.exports = {
devtool: 'inline-source-map'
// ...
}
HMR
當我們改動程式碼時，希望能自動重新編譯程式碼，webpack提供了三種不同的方式：
- 監聽模式
- webpack-dev-server
- webpack-dev-middleware
大多數情況，使用的是webpack-dev-server，本文也是使用這個，不過我會順帶介紹一下其它兩種方式，大家各取所需。
使用監聽模式：
// package.json
{
"watch": "webpack --watch"
}
執行以下命令
yarn run watch
現在當我們儲存程式碼的時候會自動編譯程式碼，重新整理瀏覽器後即可看到效果；但是我們想要自動重新整理瀏覽器怎麼辦，這時候就輪到webpack-dev-server商場了。
webpack-dev-server
它為我們提供了一個伺服器和live relaoding的能力，我們需要首先安裝它
yarn add webpack-dev-server -D
然後配置如下
// webpack.config.js
module.exports = {
// ...
devServer: {
historyApiFallback: true,contentBase: path.join(__dirname,open: false,hot: true,quiet: true,port: 8082,}
// package.json
{
"scripts": {
"start": "webpack serve"
}
}
我們在8082埠監聽了一個服務，監聽的目錄是dist，並且支援HMR，現在開啟http://localhost:8082，可以看到我們的頁面，然後改動程式碼，瀏覽器會自動重新整理更新效果，是不是很酷！
上面提到了HMR，它的全稱是Hot Module Replacement，翻譯過來就是熱模組替換，我認為它是webpack提供的最有用的一個特性，它允許我們只更新改動過的模組，而不需有全部更新，我們在上面已經開啟了該功能，即hot: true。
webpack-dev-middleware
這是一個webpack的中介軟體，可以讓webpack把檔案交給一個伺服器處理，比如接下來要使用的express，這給了我們更多的控制權，接下來簡單演示一下。
安裝express和webpack-dev-middleware
yarn add express webpack-dev-middleware -D
更改配置
module.exports = {
//...
output: {
//...
publicPath: '/'
}
}
publicPath可以定義了express監聽服務的路徑，接下來就建立我們的express`伺服器
新建一個server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
webpackDevMiddleware(compiler,{
publicPath: config.output.publicPath,})
);
// Serve the files on port 3000.
app.listen(3000,function () {
console.log('Example app listening on port 3000!\n');
});
監聽埠為3000，執行以下命令啟動服務
node server.js
方便起見，可以將該命令加入package.json
{
//...
"scripts": {
"server": "node server.js"
}
}
使用Typescript
安裝依賴
yarn add typescript ts-loader -D
在根目錄下建立typescript的配置檔案tsconfig.json，具體配置如下
{
"compilerOptions": {
"outDir": "./dist/",// "rootDir": "./src","sourceMap": true,// 開啟sourcemap
"module": "commonjs","target": "es5","jsx": "react","esModuleInterop": true,"allowJs": true,"strict": true
}
}
// webpack.config.js
module.exports = {
//...
module: {
rules: [
{
test: /\.tsx?$/,use: 'ts-loader',]
}
}
使用React
在上面配置typescript中，已經開啟了支援react，現在只需安裝react的依賴即可
yarn add react react-dom @types/react @types/react-dom
然後將入口檔案改成.tsx字尾，內容如下
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const App = () => {
return <div>hello world2</div>;
};
ReactDOM.render(<App />,document.getElementById('root'));
程式碼規範
Prettier
Prettier是一個誕生於2016年就迅速流行起來的專注於程式碼格式化的工具。出道即巔峰啊-.-
Prettier只關注格式化，並不具有lint檢查語法等能力。它通過解析程式碼並匹配自己的一套規則，來強制執行一致的程式碼展示格式。
它在美化程式碼方面有很大的優勢，配合ESLint可以對ESLint格式化基礎上做一個很好的補充。
使用
以VSCode為例，安裝Prettier外掛即可使用，如果想自定義配置，可以cmd+,快捷鍵進入vscode配置，搜尋Prettier找到對應的配置項進行配置。
Eslint
ESLint 是一個在 JavaScript 程式碼中通過規則模式匹配作程式碼識別和報告的外掛化的檢測工具，它的目的是保證程式碼規範的一致性和及時發現程式碼問題、提前避免錯誤發生。
ESLint 的關注點是程式碼質量，檢查程式碼風格並且會提示不符合風格規範的程式碼。除此之外 ESLint 也具有一部分程式碼格式化的功能。
安裝依賴，方便起見，直接使用已有的Eslint配置，這裡使用的是fabric
yarn add @umijs/fabric -D
根目錄下新建.eslintrc.js，配置如下
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],globals: {},plugins: ['react-hooks'],rules: {
'no-restricted-syntax': 0,'no-param-reassign': 0,'no-unused-expressions': 0,};
重啟編輯器，即可應用Eslint的配置。
總結
到目前為止，我們搭建了一個簡易的react腳手架，並且它支援typescript、cssnext、HMR等特性，對於一個小專案來說已經足夠用了，大家可以在此基礎上進行擴充套件；後面有時間的話會和大家一起討論一下webpack稍底層的原理，是從原始碼的角度去看。
附錄
how-to-use-webpack
webpack官網
到此這篇關於使用webpack5從0到1搭建一個react專案的實現步驟的文章就介紹到這了,更多相關webpack5搭建react專案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！