Webpack5 + React18 项目搭建

作者: 一个好昵称X | 来源:发表于2023-11-27 19:14 被阅读0次

Webpack 5 - Uncaught ReferenceEr
Vue3 webpack5 项目启动报错module prope
react18已经来了
react18 useEffect 执行两次
Webpack5更新指南
webpack5 创建react工程
webpack5 使用babel
webpack5 使用postcss
如何通过webpack5搭建vue3+ts项目
Webpack5结合mockjs

记录 React 从 0 到 1 搭建过程

1、安装 node 环境

搭建前端项目前，首先要安装本机的 node 环境，直接去 node 官网下载对应的安装包手动安装即可。官网传送门;
安装完成后，在命令行工具执行以下命令，查看是否安装成功：

    node -v
    npm -v

image.png

2、项目搭建

2.1、初始化项目

新建文件夹 react-demo;
进入 react-demo 内，在命令行工具内执行 npm init ，初始化项目。
按照提示操作完成后，文件夹内会生成一个 package.json 文件。

image.png

2.2、安装 webpack

执行一下命令安装 webpack，推荐使用 yarn 安装。
使用 yarn 前需要先全局安装：

  npm i -g yarn

安装webpack：

  yarn add webpack webpack-cli

安装完后会在项目根目录生成一个 yarn.lock 文件，该文件用来锁定当前依赖的版本号，后续再执行install 时，会直接安装该文件内的依赖版本，不会再自动更新 package.json 中的依赖版本。
要想更新 package.json 中的依赖版本需要执行如下命令覆盖：

  yarn add xxx@xxx

2.3、初始化项目结构

在src目录下，新增 index.js，作为项目的入口文件，也是 webpack 配置的入口文件；
根目录下新增 src 文件夹，用于存放源码；
根目录下新增 config 文件夹，用于存放 webpack 和项目相关配置的文件；

在 config 文件加下新增 webpack.config.js 文件，在该文件内加入如下内容，配置 webpack 基本信息

  const path = require('path');

  module.exports = {
    mode: 'development', // 指定 webpack 打包环境
    entry: './src/index.js', // 项目的入口文件，路径相对于项目根路径
    output: {                       
      filename: 'bundle.js', // 打包输出的文件名，实际项目中需要按一定规则动态生成
      path: path.resolve(__dirname, '../dist') // 打包完成后输出的路径，这里的路径针对的是当前目录
    }
  };

在根目录 index.js 文件中，加入一个打印日志，用来测试打包是否成功：

image.png

配置 package.json 内的 script 命令，用来执行打包操作：
增加如下命令：

  "build": "webpack --config ./config/webpack.config.js",

image.png

在命令行工具内执行如下命令，来进行打包：

  yarn build

打包完成后，在根目录会生成一个 dist 目录，里面有 bundle.js 文件，即打包后的文件。

image.png

打包过程中可能出现的报错：

invalid or unexpected token
产生该问题的原因可能有以下几种；

webpack 配置文件配置错误或者是语法错误
缺少loader
某些非 js 文件的资源，缺少对应的 loader ，也可能会导致此问题。
文件编码问题
排除问题时，可以尝试是否文件编码的问题，增加 webpack-encoding-plugin 配置，修改编码。
首先安装 webpack-encoding-plugin 依赖,

  yarn add webpack-encoding-plugin

在 webpack 配置文件中增加如下配置：

  const EncodingPlugin = require('webpack-encoding-plugin');
  
  // 增加 plugin 配置
  plugins: [
    new EncodingPlugin({
      encoding: 'utf-8'
    })
  ]

重新打包

2.4 增加核心配置

安装 babel 核心依赖，这样依赖会将 ES5+ 的语法转换成 ES5，目前ES5+的语法还不能直接在浏览器编译，因此需要安装这些依赖对ES5+的代码进行一个转换。

  yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react

依赖安装完成后，在项目根目录新建文件 .babelrc，并加入如下内容：

{
  "presets": [ // 相当于插件集合，不需要在 plugins 中再配置多个插件
    [
      "@babel/preset-env", {
        "useBuiltIns": "entry",    //如果用了@babel/polyfill的话，配置这个属性可以将@babel/polyfill按需引入
        "corejs": 2
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": []
}

module.exports = babelConfig;

修改 webpack.config.js，新增module，配置 babel-loader：

  module: {
    rules: [
      // 配置babel-loader
      {
        test: /\.(js|jsx)$/,
        use: ["babel-loader"],
        include: path.join(__dirname, "../src"),
        exclude: /node_modules/,
      },
    ],
  },

配置完成后，在入口文件内新增 es6+ 的内容，并重新打包，测试配置是否成功。

上述配置完成后，因为 babel 只会转换 es6 语法，而不会转换新的 api (如 promise，generator 函数等)，让新的 api 生效的方法是使用传统的 polyfill，为此需要安装 @babel/polyfill 这个模块。

安装 @babel/polyfill

  yarn add @babel/polyfill

@babel/polyfill 安装完成后不再需要进行额外的配置。

安装完 @babel/polyfill 之后，还需要安装以下3个库，来实现按需加载的效果：

  yarn add @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-class-properties

这几个库的作用可参考知乎文章
一文谈完前端项目中的Babel配置

上述依赖安装完成后，增加 babel 相关配置，在 .babelrc 文件中增加以下配置:

  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]

入口文件内，新增 Promise 代码，重新打包，测试打包效果。

  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('sync log');
    }, 1000);
  });

  promise.then(res => {
    console.log(res);
  });

新增sass/less 等css预处理器解析配置
安装以下依赖

   yarn add stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader

在webpack 配置文件中，配置解析器, 新增loader：

    // 配置css预处理器
    {
      test: /\.less$/,
      use: [
        "style-loader",
        "css-loader",
        "less-loader",
      ],
    },

配置完成后，根目录下新增 index.less 文件，加入样式配置：

  @primary-color: #29BEDB;

  div {
    color: @primary-color;
    font-size: 14px;
    font-weight: 600;
  }

在 index.js 入口文件中，引入新增的样式文件，重新打包，查看打包效果。

在使用到 css3 的某些新特性时，为了适应不同浏览器的兼容性，需要为不同的浏览器增加不同的前缀，此时就需要用到 postcss-loader 来为css代码自动添加前缀。
安装依赖

  yarn add postcss-loader autoprefixer cssnano

配置loader：

      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  require("autoprefixer"),
                  require("cssnano")
                ],
              },
            },
          },
          "less-loader",
        ],
      },

配置静态资源解析

在项目中用到的图片等资源，都需要配置相关的解析工具，安装如下依赖：

  yarn add file-loader url-loader

file-loader可以用来帮助 webpack 打包处理一系列的图片文件。打包后的每张图片都会生成一个随机的 hash 值作为图片名；url-loader 封装了 file-loader，其工作原理：1、文件大小小于limit 数值，url-loader 将会把文件转为Base64；2、文件大小大于 limit，url-loader 会调用 file-loader 进行处理，参数也会直接传给file-loader。

配置 loader，新增图片资源loader：

      //配置图片资源loader
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024,
              fallback: {
                loader: "file-loader",
                options: {
                  name: "img/[name].[hash:8].[ext]",
                },
              },
            },
          },
        ],
      },

配置完成后，在 src 目录下新增 assets 静态资源目录，在目录内放入一张图片，在入口文件 index.js 文件中引入图片，重新打包。

  const img = require('./assets/img/profile.jpg');

打包完成后，可以看到在dist目录内生成一个新的 img 目录，里面即是用到的图片文件，说明打包成功。

配置压缩js、css等文件，减小打包体积
安装依赖：

  yarn add mini-css-extract-plugin

在webpack配置文件中新增相关配置

  // 引入插件依赖
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  // plugins内 实例化插件 
  plugins: [
    // 实例化插件 MiniCssExtractPlugin
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
      chunkFilename: "css/[id].[contenthash].css",
    }),
  ],

  // 配置loader， module内新增loader
  // 配置css压缩插件
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: "../",
        },
      },
      "css-loader",
    ],
  },

配置完成后，在根目录新增 test.css 文件，在入口文件内引入，进行打包，查看效果。
打包成功后会在 dist 目录内出现 css 文件目录。

image.png

该插件之后压缩 css 文件，原 less 文件还会继续打包到 js 文件内。

抽离公共代码
打包后的 js 、css 文件中会有很多公共代码，如果不将这些代码进行抽离，最后打包文件会变得很大，所以需要使用 SplitChunksPlugin 插件抽离公共代码，只需在 webpack 配置文件中加入如下配置：

  optimization: {
    // 抽离公共代码插件的配置
    splitChunks: {
      cacheGroups: {
        // 打包公共模块
        commons: {
          chunks: "initial", // 代码分割时默认对异步代码生效 async，all：所有代码有效，initial：同步代码有效
          minChunks: 2, // 分割之前模块在块与块之间共享的最小次数
          minSize: 20000, // 提取公共部分的最小的大小（以字节为单位）
          name: "common", // 设为 false 将保持块的相同名称，因此不会不必要地更改名称（生产版本推荐）
        },
      },
    },
  },

配置解析器Resolve
Resolvers 解析器=用于告诉 webpack 去哪些目录下查找引用的模块，默认值是["node_modules"]。

webpack 配置文件下，新增如下内容：

  resolve: {
    extensions: [".js", ".jsx"], // 引入 js jsx文件时，引入路径不需携带文件后缀
    // 设置别名，@ 直接指向 src 目录
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },

** 配置热更新 **
新增如下依赖

  yarn add webpack-dev-server html-webpack-plugin

webpack-dev-server 用于热更新，html-webpack-plugin 用于动态的将打包后的 css、js文件加入到 html 中，相关配置如下：

在 plugins 内新增 HtmlWebpackPlugin 实例化

    // 引入html模板插件
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    //实例化Html模板模块
    // 不指定模板会在dist目录自动生成一个html文件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../index.html"),
    }),

    // 配置 devServer
    devServer: {
      // 配置热更新模块
      static: {
        directory: path.join(__dirname, "public"),
      },
      compress: true,
      hot: true,
      port: 3001,
    },

在根目录新增 index.html 文件，加入如下内容

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Webpack Demo</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <div id="root"></div>
    </body>
  </html>

在 package.json 文件中 script 内新增启动命令：

  "start": "webpack-dev-server --config ./config/webpack.config.js",

控制台执行 yarn start 启动项目。

删除上一次的打包结果及记录
安装依赖

   yarn add clean-webpack-plugin

clean-webpack-plugin 帮我们在每次打包时，清除上一次打包的内容。
配置如下，直接实例化插件即可：

  // 引入插件
  const { CleanWebpackPlugin } = require("clean-webpack-plugin");

  // 实例化插件
  new CleanWebpackPlugin(),

3、集成 React

安装React、react-dom
首先安装 react、react-dom 依赖

  yarn add react react-dom

在入口文件内挂载 React

  import React from "react";
  import ReactDOM from "react-dom/client";

  import App from "@/App";

  // v18 的新方法
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

在 src 目录下新增 App.js 文件：

  import React from "react";

  const App = () => {
    return <div> React18 + Webpack5 from 0 to 1 </div>;
  };

  export default App;

重新 yarn start 启动项目，启动成功

image.png

安装react-router-dom

  yarn add react-router-dom

依赖安装完成后，在 src 目录下新增 routes 目录，用来存放页面组件代码。
在 routes 下新增 List.js，Detail.js 两个文件。

image.png

两个文件内分别加入不同的内容
List.js

  import React from 'react';

  export default function List() {
    return (
      <>
        this is list page.
      </>
    )
  }

Detail.js

  import React from "react";

  export default function Detail() {
    return <div style={{color: 'red'}}>this is detail page.</div>;
  }

此时在 src 目录下新增 config 目录，config目录下新增 routers.js 文件，用于存放页面路由。
routers.js 文件内加入如下内容：

  // 存放页面路由
  import List from "@/routes/List";
  import Detail from "@/routes/Detail";

  // 存放页面路由
  const routes = [
    {
      path: "/",
      component: List,
      exact: true,
    },
    {
      path: "/detail",
      component: Detail,
    },
  ];

  export default routes;

修改入口文件 index.js 如下：

  import React from "react";
  import ReactDOM from "react-dom/client";
  import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

  import routes from "./config/routers";

  // v18 的新方法
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      <Router>
        <Link to="/">列表</Link>
        &nbsp;&nbsp;
        <Link to="/detail">详情</Link>

        <Routes>
          {routes.map((item, key) => {
            if (item.exact) {
              return (
                <Route
                  exact
                  path={item.path}
                  element={<item.component />}
                  key={key}
                />
              );
            } else {
              return (
                <Route path={item.path} element={<item.component />} key={key} />
              );
            }
          })}
        </Routes>
      </Router>
    </React.StrictMode>
  );

启动项目，可点击列表或详情加载对应的内容：

image.png

Webpack 5 - Uncaught ReferenceEr
项目升级webpack5后报错：process is not defined 原因：webpack5不再自动 po...
Vue3 webpack5 项目启动报错module prope
一、启动新项目时Vue3，webpack5 项目启动报错module property was removed f...
react18已经来了
react18他来了 react17都还没捂热，react18突然就来了，没有一点点防备，react官网已经放出r...
react18 useEffect 执行两次
最近用React18做了个项目，发现这种情况下的log会执行两次查找资料发现：image.png 解决方法：取消...
Webpack5更新指南
Webpack5更新指南 2020-10-10 Webpack5 正式 realease 相较于 Webpack4...
webpack5 创建react工程
webpack5 创建react工程 1.clone 一份 webpack5 创建前端工程[https://git...
webpack5 使用babel
webpack5 使用babel 1.克隆一份webpack5创建前端代码[https://github.com/...
webpack5 使用postcss
webpack5 使用postcss 1.克隆一份 webpack5创建前端代码[https://github.c...
如何通过webpack5搭建vue3+ts项目
现阶段前端打包工具很多，目前常用的是webpack，grunt等，在没出现更好的工具之前，学好这两个其中的一个基本...
Webpack5结合mockjs
webpack5之前使用的是devServer.before来配置mock服务, 到了webpack5则改为dev...

Webpack5 + React18 项目搭建

1、安装 node 环境

2、项目搭建

2.1、初始化项目

2.2、安装 webpack

2.3、初始化项目结构

2.4 增加核心配置

3、集成 React

相关文章

Webpack 5 - Uncaught ReferenceEr

Vue3 webpack5 项目启动报错module prope

react18已经来了

react18 useEffect 执行两次

Webpack5更新指南

webpack5 创建react工程

webpack5 使用babel

webpack5 使用postcss

如何通过webpack5搭建vue3+ts项目

Webpack5结合mockjs

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读