webpack+typescript+react搭建一个项目

最新推荐文章于 2024-06-20 22:58:35 发布

qiuqiula_

最新推荐文章于 2024-06-20 22:58:35 发布

阅读量770

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qiuqiula_/article/details/104403528

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考文章是另一位博主的博客，原文地址：https://blog.csdn.net/YIDBoy/article/details/80376745
由于参考的博客在我电脑上有些时候会缺少依赖而报错，所以本篇博文在这位博主的基础上有些变化。侵删。

安装依赖

npm init -y

cnpm install -D webpack

cnpm install -D webpack-cli

cnpm install --save-dev react react-dom @types/react @types/react-dom

cnpm install --save-dev ts-loader

cnpm link typescript

cnpm install --save-dev webpack-dev-server

cnpm install -D babel-loader  @babel/core @babel/preset-react  // 注意，原文这里指定了babel-loader的下载版本，在我电脑上会报错，找不到该版本，所以直接删去了版本号

cnpm install antd --save

cnpm install axios

配置

tsc --init

生成typescript的配置文件：tsconfig.json，修改一下：

{
  "compilerOptions": {
    "sourceMap": true,  //是否生成对应的.map文件
    "noImplicitAny": true, 
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  }
}

接着我们创建src目录，以及在src目录下创建components目录，并且创建文件：

src/index.tsx 和 src/components/Ant.tsx
index.tsx代码如下（对原文代码略有修改）：

import * as React from "react"
import * as ReactDOM from "react-dom"

import { Ant } from "./components/Ant"

ReactDOM.render(
  <Ant/>,
  document.getElementById("app")
)

Ant.tsx代码如下（对原文代码略有修改）：

import * as React from "react"

export interface AntProps {
  name?: string
  company?: string
}

export class Ant extends React.Component<AntProps, {}> {
  render() {
    return (
      <h1>
        Hello, React ~ ~ ~
      </h1>
    )
  }
}

接着我们在根目录下创建webpack.config.js和index.html:
webpack.config.js配置如下：

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    //入口文件的路径
    entry: "./src/index.tsx",
    output: {
        //打包的输出路径
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // 添加需要解析的文件格式
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: './index.html',
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-react'],
                    plugins: ['@babel/plugin-proposal-class-properties']
                }
            },
            {
                test: /\.tsx?$/,
                use: ['ts-loader']
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
    },
    // 启用sourceMap
    devtool: "source-map",
}

index.html代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello Ant</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

接着直接运行webpack-dev-server，代码报错，根据报错信息进行对应的操作：
在这里插入图片描述
报错原因：Cannot find module ‘clean-webpack-plugin’
解决办法：cnpm install clean-webpack-plugin
安装好之后重新运行，再次报错：

报错原因： Cannot find module ‘html-webpack-plugin’
解决办法：cnpm install html-webpack-plugin
安装好之后重新运行，再次报错：
在这里插入图片描述
报错原因：在webpack.config.js文件中第19行代码多余。
解决办法：直接注释掉即可。

保存之后重新运行，此时已经不再报错，编译成功：

在浏览器直接访问localhost:8080（这里需要手动打开浏览器），可以看到页面，这里已经配置了实时更新了。
但是由于每次使用 webpack-dev-server来运行项目不太方便，因此可以再配置一下：
在package.json的"script"中加上一行代码：

"dev": "webpack-dev-server --open"

在这里插入图片描述
在这之后就可以直接使用命令npm run dev来启动项目了，参数"--open"是使项目在首次启动时会自动打开浏览器。
再执行一下npm run build来试一下打包文件。可以打包。

qiuqiula_

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
webpack+typescript+react搭建一个项目

参考文章是另一位博主的博客，原文地址：https://blog.csdn.net/YIDBoy/article/details/80376745由于参考的博客在我电脑上有些时候会缺少依赖而报错，所以在这位博主的基础上稍微有点变化。npm init -ycnpm install -D webpackcnpm install -D webpack-clicnpm install --s...
复制链接

扫一扫

专栏目录