React 学习之旅——掘金 webpack 基本配置

2023-12-17 18:05:08

React 作为时下最流行的前端框架之一，为我们构建高性能、可复用的 UI 组件提供了强大的支持。而 webpack，作为一款现代化的构建工具，则可以帮助我们将各种资源打包成高效的可部署文件。

起步

在使用 webpack 之前，你需要确保电脑上已安装了 Node.js。你可以通过在命令行窗口运行命令 node -v 来查看版本号，如果输出结果不为空，则说明安装成功。

Node.js 安装完成后，你就可以使用它的包管理器 npm 来安装 webpack。在命令行窗口中运行命令 npm install -g webpack，即可完成安装。

接下来，让我们新建一个 React 项目，在命令行中运行 npx create-react-app react-webpack-demo。稍等片刻，项目创建成功后，切换到该目录，运行 npm start，浏览器中将会打开一个显示 "Hello, World!" 的页面。

配置 webpack

现在，我们已经拥有了一个基本的 React 项目，接下来就让我们来配置 webpack。在项目根目录下，你可以找到一个名为 webpack.config.js 的文件，打开它，你会看到如下内容：

const path = require('path');

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

这个文件是 webpack 的配置文件，它告诉 webpack 如何将我们的代码打包成可部署的文件。

入口文件

在配置文件中，entry 属性指定了项目的入口文件，在本例中，它是 ./src/index.js。webpack 将从这个文件开始解析依赖关系，并最终将所有代码打包成一个文件。

输出文件

output 属性指定了打包后的输出文件，在本例中，它是 ./dist/bundle.js。这个文件将包含所有打包后的代码，并可以部署到服务器上。

模块加载器

module 属性指定了 webpack 如何处理不同的文件类型。在本例中，我们使用 babel-loader 来处理 JavaScript 文件，并将 @babel/preset-env 和 @babel/preset-react 作为预设。这意味着 webpack 将把 ES6 代码转换成 ES5 代码，并支持 React 语法。