借鉴Webpack 5的最后一炮，构建React良好开发环境

2023-11-04 10:38:34

前言
大家好，这是 Webpack5 搭建 React 开发环境的最后一篇，上一篇可能比较浅，细节考虑的不是很到位，那么通过这篇来完善一下吧。干货还是可以的看完会有收获，建议边看边喝水。最近也是忙着搞埋点，我也不想咕咕咕（放各位鸽子），所以尽管写写不吐不快！

正文

Webpack 5作为一款功能强大且灵活的模块打包工具，在构建 React 开发环境方面有着明显的优势。为了全面展现Webpack 5的强大之处，本教程将分为几个部分，逐一介绍如何利用Webpack 5构建一个实用的 React 开发环境。

1. 项目初始化

首先，我们需要创建一个新的 React 项目，可以使用 create-react-app 命令：

npx create-react-app my-react-app

这样就会在当前目录创建一个新的 React 项目。

2. 安装 Webpack 5

接下来，我们需要安装 Webpack 5。在项目根目录下，使用以下命令安装 Webpack 5：

npm install webpack@5 --save-dev

3. 配置 Webpack 5

安装 Webpack 5 后，我们需要在项目根目录创建一个 webpack.config.js 文件。这个文件将包含 Webpack 5 的配置。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

4. 运行 Webpack 5

配置好 Webpack 5 后，我们可以使用以下命令运行 Webpack 5：

npm run build

这条命令会将我们的代码打包成一个名为 bundle.js 的文件，并将它放在 dist 目录下。

5. 热加载

Webpack 5 支持热加载功能，这样当我们修改代码时，浏览器会自动刷新页面，而无需重新构建整个项目。为了启用热加载，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...

  devServer: {
    hot: true,
  },

  // ...
};

然后，我们可以使用以下命令运行 Webpack 5：

npm start

这样就会启动一个开发服务器，并启用热加载功能。

6. 代码拆分

Webpack 5 还支持代码拆分功能，这样可以将我们的代码拆分成更小的块，以便并行加载。为了启用代码拆分，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

  // ...
};

7. 按需加载

Webpack 5 还支持按需加载功能，这样可以仅在需要时加载代码块。为了启用按需加载，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: true,
  },

  // ...
};

8. 文件压缩

Webpack 5 还支持文件压缩功能，这样可以减小代码块的大小。为了启用文件压缩，我们需要在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...

  optimization: {
    // ...
    minimize: true,
  },

  // ...
};

9. 使用 React Router

Webpack 5 还支持 React Router，这样可以轻松地在我们的应用程序中创建路由。为了使用 React Router，我们需要安装它：

npm install react-router-dom --save

然后，我们可以在我们的代码中使用 React Router：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;