React+TS通用Webpack脚手架搭建（阶段二）

完善脚手架

在上一阶段中，我们已经搭建了一个基础的webpack框架，在这个阶段，我们将对这个框架进行完善。

首先，我们需要安装一个UI框架。为了保证不同类型项目的兼容性，我们选择了一个支持 React 的 UI 框架，这样可以保证无论是 Web 还是移动端，都可以使用这个脚手架。

我们选择使用Ant Design，这个UI框架拥有丰富的组件和样式，可以满足大多数项目的UI需求。

npm install antd

然后，我们需要在项目中引入UI框架。在 src 目录下创建两个文件，分别命名为 App.tsx 和 index.tsx。在 App.tsx 中，引入 UI 框架：

import { Button } from 'antd';

const App = () => {
  return (
    <div>
      <Button type="primary">按钮</Button>
    </div>
  );
};

export default App;

在 index.tsx 中，引入 App.tsx：

import App from './App';

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

现在，我们就可以在项目中使用 UI 框架了。

其次，我们需要对webpack配置进行修改，使其支持UI框架。在 webpack.config.js 中，找到 module.rules 数组，并添加以下代码：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

这部分代码的作用是，告诉 webpack 如何处理 css 文件。

最后，我们需要修改 package.json 文件，使其支持 UI 框架。在 package.json 文件中，找到 scripts 对象，并添加以下代码：

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack"
}

这部分代码的作用是，告诉 npm 如何启动开发服务器和构建项目。

现在，我们的脚手架就搭建完成了。我们可以使用以下命令启动开发服务器：

npm start

然后，我们就可以在浏览器中看到我们的项目了。

结语

本文介绍了如何搭建一个 React+TS 通用 webpack 脚手架（阶段二）。这个脚手架已经装载了 UI 框架，提供了更完善的开发环境。希望本文对您有所帮助。

如果您有任何问题或建议，欢迎在评论区留言。