使用 webpack4 配置 React 的全流程-JavaScript中文网-JavaScript教程资源分享门户

随着 React 应用的逐渐成熟，Webpack 作为一个打包工具，已经成为了前端开发过程中不可缺少的一环。而在现在的项目中，用 Webpack 来搭建 React 的开发环境已经成为了前端开发的标配。本文将深入讲解如何使用 Webpack4 来搭建 React 的全流程开发环境，包含从安装到配置到使用的详细步骤，并提供示例代码。

1. 安装 Webpack4

首先我们需要在全局安装 Webpack4：

npm install webpack webpack-cli -g

2. 安装 React

使用 npm 安装 React 依赖：

npm install react react-dom --save

3. 配置 Webpack

Webpack 配置文件通常命名为 webpack.config.js，在项目根目录下创建该文件，并加入以下代码：

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

在这个配置文件中：

entry：配置了入口文件
output：配置了输出文件
module：配置了使用 Babel-loader 编译 jsx 语法
plugins：使用 HtmlWebpackPlugin 注入打包后的 bundle 到 index.html
devServer：配置了开发服务器

需要注意的是，这里的 Babel 配置只添加了 '@babel/preset-react'，如果需要使用 ES6，还需要添加 '@babel/preset-env'。

4. 配置 Redux

如果你需要使用 Redux 来管理 React 应用的状态，那么还需要安装 Redux 和相关的依赖：

npm install redux react-redux --save

然后，在 src 目录下创建 store 目录，然后创建 index.js 文件：

import { createStore } from 'redux';
import reducer from '../reducers';

const store = createStore(reducer);

export default store;

在 index.js 文件中引入该 store：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';

import App from './components/App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在此之前，还需要在 reducers 目录下创建 Redux 的 reducer。

5. 编写打包前的入口文件

在 src 目录下创建 index.js 入口文件，然后引入：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './components/App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

6. 编写 React 组件

在 src/components 目录下创建 App.js 文件：

// javascriptcn.com 代码示例
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default App;

7. 编写打包前的 HTML 文件

在 public 目录下创建 index.html 文件，然后引入：

// javascriptcn.com 代码示例
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

8. 打包项目

运行以下命令打包：

webpack --mode production

打包后会在 dist 目录下生成 bundle.js 文件。然后在浏览器中打开 index.html，就可以看到页面上渲染出了「Hello, World!」的字样。

总结

本文详细介绍了使用 Webpack4 配置 React 的全流程，包含安装，配置，编写 React 组件，打包项目等步骤，并提供了示例代码。希望对初学 React 的同学有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6502910795b1f8cacdfd2c44