导言

在这个“Webpack?Create React App?No、Vite!!”系列中，我们将分为5部分来探讨以下内容。

1. 通过使用React开发环境搭建中的标题工具，理解JS中的”编译”，”打包”和”构建”

体验vite的技术强大和其令人惊叹的”爆速”

我正在考虑以下现状标题的选项。

①了解编译、打包和构建的概念

② 使用webpack搭建React开发环境[打包器/编译器版]

③利用Webpack搭建React开发环境[开发服务器/热模块替换版]←上回

只需要一个选择：使用Create React App搭建React开发环境

使用Vite构建React开发环境及其技术优势。

4. 通过使用Create React App来构建React开发环境

我之前做过两次webpack的开发环境搭建。即使是搭建最基本的开发环境，也需要相当多的配置。这次我们将涉及一个名为Create React App的工具，这是由Facebook（现在是Meta）开发的。但是这次我们不会进行开发环境的搭建，只是介绍一下这个工具。原因是因为Create React App已经不再是推荐的工具了。所以

4.1. 什么是Create React App？

如先前所述，Create React App是Meta公司开发的用于轻松设置React开发环境的工具。它可以自动处理之前需要进行特别配置的构建过程。

以下是CRA的代码库中所记录的设计思想的内容。

只有一个依赖关系：只有一个构建依赖。它使用webpack，Babel，ESLint和其他令人惊叹的项目，但在它们之上提供了一个统一的精心策划的体验。

→ 虽然我在后台使用了各种工具，比如webpack，但你可以毫不费力地使用它。只需要考虑我的事情就好了。

无需配置：您无需进行任何配置。开发和生产构建的合理配置已经帮您处理好，因此您可以专注于编写代码。

→不需要写太多的设置文件了。我们集中精力写应用代码吧。

无锁定：您可以随时“弹出”到自定义设置。运行一个命令，所有配置和构建依赖项都将直接移动到您的项目中，这样您就可以从您离开的地方继续进行。

只要你能「退場」，隨時都可以自由自在地做你喜歡的事情。之後由你自己隨意安排。

像是有出息的父母一样的行为，对吧。

4.2. 简易安装

只需使用yarn、npm或npx进行初始化或执行命令即可，使用方法非常简单。

npx create-react-app my-app

如果你使用npm的话

npm init react-app my-app

如果是yarn的话

yarn create react-app my-app

只需要这样就可以在没有任何设置的情况下完成Webpack做的事情。

你在里面做什么？

我把它弹出来，稍微偷瞄一下里面。

npm run eject

然后出现了一个名为”config”的大文件夹。虽然试图仔细看会很麻烦，但如果看一下”webpack.config.js”的内容，您会发现基本上都是我们以前通过进研ゼミ所做的事情。

react-refresh和babel出现了！

const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
  '@pmmmwh/react-refresh-webpack-plugin'
);
const babelRuntimeEntry = require.resolve('babel-preset-react-app');
const babelRuntimeEntryHelpers = require.resolve(
  '@babel/runtime/helpers/esm/assertThisInitialized',
  { paths: [babelRuntimeEntry] }
);

正在加载CSS加载程序！

  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },

这是HTMLWebpackPlugin。

    plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),

在实际内部运行时，它是基于进行webpack开发环境搭建时进行的配置。通过巧妙的隐藏，让使用者可以毫不费力地使用，而无需太过关注。这种无需配置的构建工具非常适应只需进行最低限度设置的需求。然而，如果需要更加灵活地进行自定义使用时，则需要进行配置“eject”以单独运行。

雖然有點早，但這次就到這裡結束吧。
下一次我們將進入「爆速」Vite的秘密世界，無比期待。