Webpack集成React的妙法：从零打造极简前端工程（二）

2023-12-26 07:40:03

引言：延续极简，探索新篇章

在前文中，我们已经掌握了Webpack打包的基本技巧，能够将简单的JavaScript文件编译成浏览器可执行的代码。然而，随着前端开发的不断演进，我们不可避免地需要使用各种各样的前端库来提高开发效率和提升用户体验。其中，React凭借其强大的组件化思想和丰富的生态体系，成为众多开发者的首选。

第一步：搭建脚手架，筑稳React根基

安装create-react-app

在终端中输入以下命令：
```
npx create-react-app react-webpack-project
```
稍等片刻，项目初始化完成。
安装Webpack

在终端中切换到新建的项目目录，并输入以下命令：
```
npm install --save-dev webpack webpack-cli
```
Webpack及其命令行工具将被安装到项目中。

第二步：配置Webpack，让React如鱼得水

创建Webpack配置文件

在项目根目录下创建一个名为webpack.config.js的文件，并输入以下内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

修改入口文件

在项目src目录下的index.js文件中，添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

第三步：运行Webpack，见证代码结晶

运行Webpack

在终端中输入以下命令：
```
npx webpack
```
Webpack将开始编译代码，并在dist目录下生成一个名为bundle.js的文件。
启动项目

在终端中输入以下命令：
```
npm start
```
项目将以开发模式运行，浏览器中将打开http://localhost:3000，你将看到"Hello, World!"的字样。