webpack4.0 搭配 React + TypeScript，构建强大应用

2023-12-09 22:55:29

在前端开发中，React 和 TypeScript 无疑是两大热门技术。React 以其强大的组件化开发模式和丰富的社区生态，受到了众多开发者的青睐；而 TypeScript 作为 JavaScript 的超集，则以其出色的类型系统和强大的工具支持，帮助开发者构建出更加健壮、可维护的代码。

webpack 作为一款功能强大的构建工具，可以帮助开发者将源代码打包成可以在浏览器中运行的代码。webpack 4.0 是 webpack 的最新版本，它带来了许多新的特性和改进，包括对 TypeScript 的原生支持。

本教程将带你从零开始，一步步搭建一个基于 webpack 4.0 的 React + TypeScript 应用。在学习过程中，你将了解到 webpack 的基本配置、React 和 TypeScript 的基础知识，以及如何将它们结合起来使用。

第一步：安装必要的依赖

首先，你需要安装必要的依赖。可以使用以下命令来安装：

npm install -g webpack webpack-cli
npm install --save react react-dom typescript

第二步：创建一个新的项目

接下来，创建一个新的项目文件夹。在这个文件夹中，创建一个名为 package.json 的文件，并添加以下内容：

{
  "name": "webpack-react-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "typescript": "^3.7.4",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

第三步：配置 webpack

接下来，创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    open: true
  }
};

第四步：创建应用程序

现在，你可以在 src 文件夹中创建一个名为 index.tsx 的文件，并添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));