目录
Webpack+React+TS
tsconfig.json
src/App.tsx
src/main.tsx
scripts/webpack.config.js
package.json
scripts/template.html
一张ai生成图~
Webpack+React+TS
npm install react react-dom 【安装react并且安装一个react-dom】
引用时文件出现...;需要增加定义文件，如import React from ...'react'
npm install @types/react
引用时文件出现...;需要增加定义文件
npm install @types/react-dom
tsconfig.json
{
"compilerOptions": {
"lib": [ // 例，增加标准库,
"DOM",
"ESNext" // 下一代ES，不加的话，有些es语法找不到
],
"jsx": "react", // TS会认识.tsx，并将他转化成需要的语义
"outDir": "build", // 编译完的项放在build目录下
"esModuleInterop": true // React内部export
},
"include": [
"src/**/*"
] // src 下所有文件都需要ts编译
}src/App.tsx
import React from 'react'
export default () => {
return <h1>Hello world!</h1>
}src/main.tsx
import ReactDOM from 'react-dom'
import React from 'react'
import App from './App'
ReactDOM.render(<App />, document.getElementById("root"))scripts/webpack.config.js
// 记得安装npm install typescript -D
// 记得安装npm install -D webpack-dev-server
const path = require('path')
// 安装插件开发模式 npm add -D html-webpack-plugin webpack webpack-cli
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// entry【入口】__dirname当前文件所在目录，../src/main.tsx入口文件main.tsx路径
entry: path.resolve(__dirname, '../src/main.tsx'),
mode: "development",// 打包模式
output: {
filename: "bundle.js",// 打包好的文件名
path: path.resolve(__dirname, '../build') // 打包好的文件放在这个文件夹里
},
devServer: {
static: { // 新版本webpack5，老版本webpack4：directory放在{}外面
directory: path.resolve(__dirname, "../build"), // 静态资源地址
},
port: 3000 // 端口3000
},
resolve: {
extensions: ['.tsx', '.ts', '.js']// resolve可以解析的文件类型
},
plugins: [
// 安装插件开发模式 npm add -D html-webpack-plugin webpack webpack-cli
new HTMLWebpackPlugin({
template: path.resolve(__dirname, "./template.html") // 模板文件
})
],
module: {
rules: [
{
test: /\.tsx?$/, // /\.tsx?$/ 这个?代表x可以有，也可以没有
use: 'ts-loader', // 用ts-loader编译typescript
exclude: /node_modules/
}
]
}
}package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// webpack 启动devServer
"dev": "webpack serve --config scripts/webpack.config.js"
},scripts/template.html
<html>
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>一张ai生成图~
(8k, RAW photo_1.2),1 girl,(long hair_1.31),full body shot,1 8 year-old,thin and tall,green silk cloak,wet,rainbow waterfall,rainbow water,(((rainbow ))),natural godness,sunshine,(clear fingers:1.5),(parted lips:1.1), (eyelashes:1.1), (smile:1.3),shenlilinghua-1
手有点奇怪~~~
