溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關利用webpack5怎么搭建一個react項目，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
Webpack5
命令行友好提示
es6+
React
Typescript
PostCSS + cssnext
HMR
新建一個項目，進入項目根目錄，創建默認的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, './dist'),
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"
}
}安裝依賴
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',
exclude: /node_modules/,
},
]
}
}在上面配置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是一個誕生于2016年就迅速流行起來的專注于代碼格式化的工具。出道即巔峰啊-.-
Prettier只關注格式化，并不具有lint檢查語法等能力。它通過解析代碼并匹配自己的一套規則，來強制執行一致的代碼展示格式。
它在美化代碼方面有很大的優勢，配合ESLint可以對ESLint格式化基礎上做一個很好的補充。
使用
以VSCode為例，安裝Prettier插件即可使用，如果想自定義配置，可以cmd+,快捷鍵進入vscode配置，搜索Prettier找到對應的配置項進行配置。
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的配置。
上述就是小編為大家分享的利用webpack5怎么搭建一個react項目了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
