%20(2).svg)
项目简介
这是一个基于Webpack和TypeScript的简单脚手架项目，旨在提供高效的前端应用搭建与开发方式。项目借助TypeScript的类型检查和编译功能，以及Webpack的模块打包和代码分割能力，为前端开发提供便利。
项目的主要特性和功能
- 运用TypeScript进行类型检查和编译，提升代码质量与可维护性。
- 借助Webpack实现模块打包和代码分割，优化加载速度和性能。
- 配置Babel，支持最新的JavaScript和React特性。
- 提供简单的脚手架工具，可快速搭建项目结构。
安装使用步骤
假设用户已下载本项目的源码文件，可按以下步骤安装和使用：
1. 打开终端，进入项目根目录。
2. 执行 npm init 初始化项目。
3. 执行 npm install -S typescript 安装TypeScript依赖。
4. 执行 npx tsc --init 生成tsconfig.json配置文件。
5. 修改tsconfig.json，添加 "rootDir": "./src", "outDir": "./dist" 配置项。运行 npx tsc -w 开始编译TypeScript代码。
6. 安装其他必要依赖，执行命令：
bash
npm install -D webpack webpack-dev-server webpack-cli html-loader awesome-typescript-loader style-loader css-loader less-loader file-loader babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/polyfill @babel/preset-env @babel/preset-react
7. 安装其他补充依赖：
bash
npm install less -S
npm install -D html-webpack-plugin
npm install -S typescript react react-dom @types/react @types/react-dom
npm install @types/react-router-dom react-router-dom
npm install -S query-string @types/query-string
8. 配置项目启动和构建脚本，在 package.json 中添加：
json
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
}
9. 若遇到问题，可参考以下解决方案：
- 若出现 Module not found 错误，在 webpack.config.js 中配置 resolve：
javascript
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
}
- 若遇到图片模块引入问题，在任意目录下新建 .d.ts 文件进行图片声明，并修改 tsconfig.json 添加 include：
```javascript
// .d.ts
declare module '.svg'
declare module '.png'
declare module '.jpg'
declare module '.jpeg'
declare module '.gif'
declare module '.bmp'
declare module '*.tiff'
// tsconfig.json
"include": [
"src",
"src/.d.ts"
]
- 若antd中引入的模块缺少样式，可采用以下方案：
- 方案一：使用插件引入，安装 `babel-plugin-import`，并在 `webpack.config.js` 中添加：javascript
plugins: [
['@babel/plugin-proposal-class-properties', { 'loose': true }],
['import', {
libraryName: 'antd',
style: 'css'
}]
]
- 方案二：全局直接引入css文件：javascript
import "antd/dist/antd.css"
// webpack.config.js { test: /.css$/i, use: ["style-loader", "css-loader"] } ```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】