返回

React和TypeScript：用webpack打造灵活、清晰的开发环境

前端

灵活：模块化开发与代码分割

在本系列文章的第一篇中，我们介绍了如何使用create-react-app快速搭建一个React项目。create-react-app使用webpack作为默认的打包工具，并为我们提供了开箱即用的配置。然而，随着项目规模的增长，我们需要对webpack配置进行更多定制化调整，以满足项目的需求。

模块化开发

模块化开发是一种将代码组织成独立模块的软件开发方法。每个模块都包含相关功能，并可以单独编译、测试和部署。这使得代码更容易维护和重用，也为代码分割和并行开发提供了基础。

webpack通过使用模块加载器(module loader)来实现模块化开发。webpack支持多种模块加载器，包括CommonJS、AMD和ES modules。在本项目中，我们将使用CommonJS模块加载器，因为它在Node.js中很流行，而且与React生态系统兼容。

代码分割

代码分割是一种将代码拆分成多个文件的技术。这使得我们可以只加载当前页面或功能所需的文件，从而减少初始加载时间和提高应用程序的性能。webpack通过使用代码分割插件(code splitting plugin)来实现代码分割。我们将在下一节中介绍如何配置代码分割。

清晰：热更新与文件加载

热更新

热更新是一种在保存更改时自动更新应用程序的技术。这使得开发人员可以实时看到代码更改的效果，从而提高开发效率。webpack通过使用热更新插件(hot module replacement plugin)来实现热更新。我们将将在下一节中介绍如何配置热更新。

文件加载

webpack可以加载各种类型的文件，包括JavaScript、CSS、图像和字体。这使得我们可以将所有项目资源集中在一个地方管理，并可以通过webpack的配置来优化这些资源的加载。我们将将在下一节中介绍如何配置文件加载。

配置webpack

现在我们已经了解了webpack的一些基本概念，我们可以开始配置webpack了。webpack的配置通常放在项目根目录下的webpack.config.js文件中。

安装webpack

首先，我们需要安装webpack。我们可以使用npm或yarn来安装webpack。

npm install webpack --save-dev

或

yarn add webpack --dev

创建webpack配置文件

接下来，我们需要创建一个webpack配置文件。我们可以使用webpack的命令行工具来创建一个默认的配置文件。

npx webpack --config init

这将在项目根目录下创建一个名为webpack.config.js的文件。

配置模块化开发

在webpack.config.js文件中，我们需要配置模块化开发。我们可以使用webpack的module属性来配置模块加载器。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

配置代码分割

接下来，我们需要配置代码分割。我们可以使用webpack的optimization属性来配置代码分割。

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

配置热更新

接下来，我们需要配置热更新。我们可以使用webpack的devServer属性来配置热更新。

devServer: {
  hot: true
}

配置文件加载

接下来，我们需要配置文件加载。我们可以使用webpack的module属性来配置文件加载器。

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    },
    {
      test: /\.svg$/,
      use: {
        loader: 'svg-url-loader',
        options: {
          limit: 10240
        }
      }
    },
    {
      test: /\.woff$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240
        }
      }
    },
    {
      test: /\.woff2$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240
        }
      }
    },
    {
      test: /\.eot$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240
        }
      }
    },
    {
      test: /\.ttf$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10240
        }
      }
    }
  ]
}

配置TypeScript

接下来，我们需要配置TypeScript。我们可以使用webpack的module属性来配置TypeScript加载器。

module: {
  rules: [
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        }
      }
    }
  ]
}

配置JSX

接下来，我们需要配置JSX。我们可以使用webpack的module属性来配置JSX加载器。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    },
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        }
      }
    }
  ]
}

配置npm

接下来，我们需要配置npm。我们可以使用webpack的externals属性来配置npm包的外部化。

externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

配置package.json

接下来，我们需要配置package.json。我们可以添加以下脚本到package.json文件中。

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  }
}

运行webpack

现在我们可以运行webpack了。我们可以使用以下命令来启动webpack的开发服务器。

npm start

或

yarn start

结论

在本系列文章的第三篇中，我们介绍了如何使用webpack为React和TypeScript项目创建灵活、清晰的开发环境。我们介绍了模块化开发、代码分割、热更新和文件加载等概念，并介绍了如何配置这些功能。我们还介绍了如何配置TypeScript、JSX、npm和package.json等工具。通过本系列文章，您将掌握使用webpack构建高效、可扩展的React + TypeScript项目所需的知识和技能。