React 项目 Webpack 如何配置？

前言

Webpack 是一个可定制和可扩展的开源 JavaScript 应用程序打包器，最初是专为 Web 而设计。Webpack 的主要目的是将前端应用程序的各个模块打包在一起，以便于在浏览器中引用。而对于 React 项目来说，Webpack 配置更是不可或缺的一环。在本文中，我们将讨论如何配置 React 项目的 Webpack。

Webpack 配置介绍

Webpack 配置通常分为 webpack.config.js 和 webpack.dev.config.js，前者为生产环境的配置文件，后者则为开发环境的配置文件。Webpack 配置包含多个属性，例如 entry、output、plugins、module 等。下面我们来逐一介绍各个属性：

entry

entry 定义了 Webpack 打包入口的文件路径。在 React 项目中，通常是 src/index.js。

module.exports = {
  entry: './src/index.js',
};

output

output 定义了打包后文件的输出路径和文件名。在 React 项目中，通常是指定 dist 文件夹作为输出路径，并把打包后的文件命名为 bundle.js。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出路径
    filename: 'bundle.js', // 输出文件名
  },
};

plugins

plugins 用于扩展 Webpack 的功能。在 React 项目中，我们通常需要使用 HtmlWebpackPlugin 和 CleanWebpackPlugin。

HtmlWebpackPlugin 用于生成 HTML 文件，并自动引入打包后的 JS 文件。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
};

CleanWebpackPlugin 用于每次构建前清空 dist 文件夹。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

module

module 可以对模块进行配置，包括不同类型的文件（例如 CSS、图片等）。在 React 项目中，我们主要需要配置 Babel 和 CSS。

Babel 用于将 ES6、JSX 等语法转换为浏览器可以识别的语法。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

在配置 Babel 时，我们通常需要指定一些插件，例如 @babel/preset-env、@babel/preset-react、babel-plugin-transform-class-properties 等。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              [
                'babel-plugin-transform-class-properties',
                {
                  spec: true,
                },
              ],
            ],
          },
        },
      },
    ],
  },
};

CSS 用于处理样式，我们通常使用 css-loader 和 style-loader。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

完整的 Webpack 配置

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: [
              [
                'babel-plugin-transform-class-properties',
                {
                  spec: true,
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

总结

以上就是 React 项目 Webpack 的配置方式，当然这只是最基础的配置，根据项目的实际情况，还需要进一步调整。希望读者可以通过本文对 Webpack 配置有更深入的了解。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c56f37d4982a6eb5e68b3