基于 webpack 搭建 react 项目-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 webpack 搭建项目已经成为了标配。而在使用 React 进行开发时，webpack 的使用也变得尤为重要。本文将详细介绍如何基于 webpack 搭建 React 项目，包括配置 webpack、使用 webpack 处理 React 组件、优化 webpack 构建等内容。

配置 webpack

首先，我们需要安装 webpack 及其相关插件，可以使用 npm 进行安装：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D

其中，webpack 和 webpack-cli 是 webpack 的核心模块，webpack-dev-server 是用于开发环境的服务器，html-webpack-plugin 可以将生成的 js 文件自动添加到 html 文件中，babel-loader 和 @babel/core 是用于处理 ES6+ 语法的模块，@babel/preset-env 和 @babel/preset-react 则是用于处理 jsx 语法的模块。

接下来，我们需要创建 webpack 的配置文件 webpack.config.js，其中需要配置入口文件、输出文件、模块解析、插件等信息。一个基本的配置文件如下：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
};

其中，entry 表示入口文件，可以配置多个入口文件，output 表示输出文件的路径和文件名，module 中的 rules 表示使用 babel-loader 处理 js 和 jsx 文件，plugins 表示使用 html-webpack-plugin 插件自动生成 html 文件，并将生成的 js 文件自动添加到 html 文件中。resolve 表示自动解析文件扩展名，devServer 表示开发环境的服务器配置。

处理 React 组件

在使用 React 进行开发时，我们需要将 jsx 文件转换为 js 文件，以便浏览器能够正确解析。这里我们使用 Babel 来处理 jsx 文件。需要注意的是，Babel 只是一个工具，我们还需要配置 Babel 来使其能够正确地转换 jsx 文件。

在 webpack 配置文件中，我们已经使用了 babel-loader 来处理 js 和 jsx 文件，但是 babel-loader 只是一个中间件，我们还需要配置 Babel。我们可以在项目根目录下创建一个 .babelrc 文件，来配置 Babel。一个基本的配置文件如下：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

其中，@babel/preset-env 用于处理 ES6+ 语法，@babel/preset-react 用于处理 jsx 语法。

优化 webpack 构建

在使用 webpack 进行开发时，我们需要考虑如何优化 webpack 构建，以提高开发效率。下面我们介绍几种优化方式。

开启缓存

在开发过程中，每次修改代码都需要重新构建项目，这会浪费很多时间。我们可以开启缓存来提高构建速度。在 webpack 配置文件中，我们可以使用 cache 和 cache-loader 这两个选项来开启缓存。一个基本的配置文件如下：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'cache-loader',
          },
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache'),
  },
};

其中，cache-loader 用于开启缓存，cache 用于配置缓存库的类型和路径。

使用 DllPlugin 和 DllReferencePlugin

在使用 webpack 进行开发时，每次构建项目都需要重新打包所有的依赖库，这会浪费很多时间。我们可以使用 DllPlugin 和 DllReferencePlugin 来将依赖库打包成一个单独的文件，以提高构建速度。

首先，我们需要创建一个 webpack.dll.config.js 文件，用于打包依赖库。一个基本的配置文件如下：

// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    vendors: ['react', 'react-dom'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dll/[name].manifest.json'),
    }),
  ],
};

其中，entry 表示需要打包的依赖库，output 表示打包后的文件名和路径，library 表示打包后的代码库的名称，DllPlugin 用于打包依赖库。

接下来，我们需要在 webpack 配置文件中使用 DllReferencePlugin 引用依赖库。一个基本的配置文件如下：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dll/vendors.manifest.json'),
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
};

其中，DllReferencePlugin 用于引用依赖库。

示例代码

完整的示例代码可以在我的 GitHub 仓库中查看。

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

基于 webpack 搭建 react 项目