项目结构
todolist-react-ts-tailwind
├─ .babelrc // ts转es配置
├─ dist // webpack打包后输出文件位置
│ ├─ bundle.js // 打包后代码块
│ └─ index.html // html-webpack-plugin 生成的打包后入口html
├─ package-lock.json // 锁版本的项目npm包信息
├─ package.json
├─ public // 放公共文件 如打包入口html
│ └─ index.html
├─ README
├─ src // 代码
│ ├─ app.tsx // react项目入口模块模块
│ ├─ home.tsx // home模块
│ ├─ index.css // 入口全局css
├─ tailwind.config.js
├─ tsconfig.json
└─ webpack.config.js
webpack配置
- 由于使用webpack 故引入tailwind使用postcss插件方式引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.tsx',
module: {
rules: [
{
test:/\.css$/, //正则表达式，匹配文件类型
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, {
loader:'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer'),
require('tailwindcss')
]
}
}
}]
},
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
}
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html'
})
]
};
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
package.json
{
"name": "todolist-react-ts-tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development --open",
"build": "webpack --mode=production --open",
"dev": "webpack-dev-server --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.3",
"autoprefixer": "^9.8.8",
"babel-loader": "^8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"postcss": "^7.0.39",
"style-loader": "^3.3.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
},
"dependencies": {
"css-loader": "^6.7.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"typescript": "^4.6.4"
}
}
|
