使用webpack5从0到1搭建一个react项目的实现步骤

2024-07-29 01:46:15

前言

在这之前，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展。
这篇文章是在实践中总结的，具有实操性，读者可跟着一步步进行搭建，中间我会穿插一些原理，当然因为笔者的能力有限，不会特别深入。

预备知识

熟悉Javascript && HTML && CSS
熟悉ES6+
有能力搭建Nodejs环境
会用命令行

目标

学习使用webpack5和为什么使用它
用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, './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"
 }
}

使用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',
    exclude: /node_modules/,
   },
  ]
 }
}

使用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项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

基于webpack4.X从零搭建React脚手架的方法步骤

项目初始化 $ npm init 安装webpack 本次创建是基于webpack4 $ npm install --save-dev 新建webpack配置文件在根目录创建build文件夹,添加一个js文件,命名为webpack.base.conf.js // webpack.base.conf.js 文件 const path = require('path'); const DIST_PATH = path.resolve(__dirname, '../dist'); module.ex
详解基于webpack搭建react运行环境

最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
手动用webpack搭建第一个ReactApp的示例

学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境. npm install -g create-react-app create-react-app my-app cd my-app npm start 使用淘宝 NPM 镜像使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想. 使用淘宝镜像安装 npm 包只需要两步即可: 安装 cnpm n
从零开始搭建webpack+react开发环境的详细步骤

环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 babel-preset-env@1.6.1 bable-preset-react@6.24.1 webpack安装及配置 1. 起步新建项目目录,初始化npm,新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir sr
webpack4 + react 搭建多页面应用示例

webpack 升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说直接撸码创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-de
使用webpack搭建react开发环境的方法

1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新
详解使用WebPack搭建React开发环境

第一步.基础环境初始化项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架入口文件(src/index.js) import React from 'react' import {render} from 'react-dom' import App from './App' render(<App/>,document.getElementById('root')) 主组件(s
Webpack 4.x搭建react开发环境的方法步骤

本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&
基于Webpack4和React hooks搭建项目的方法

面对日新月异的前端,我表示快学不动了:joy:. Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API.刚好春节在家里休假,时间比较空闲,还是赶紧把 React 技术栈这块补上. 网上有很多介绍 hooks 知识点的文章,但都比较零碎,基本只能写一些小 Demo .还没有比较系统的,全新的基于 hooks 进行搭建实际项目的讲解.所以这里就从开发实际项目的角度,搭建起单页面 Web App 项目的基本脚手架,并基于 hooks API 实现一个 rea
基于webpack4搭建的react项目框架的方法

介绍框架介绍,使用webpac构建的react单页面应用,集成antd.使用webpack-dev-server启动本地服务,加入热更新便于开发调试.使用bundle-loader进行代码切割懒加载手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解启动 git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录