前端 webpack搭建React应用环境(一)

前端 webpack搭建React应用环境(一)

改环境支持的技术场景:

1. 支持 React

2. 支持 typescript

3.支持 scss

4.支持 调试热更新

一、创建项目目录
npm init
二、安装依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
npm install html-webpack-plugin clean-webpack-plugin --save-dev
npm install react react-dom --save
npm install ts-loader typescript core-js --save
npm install --save-dev @babel/preset-typescript
npm install --save-dev @babel/preset-react
npm install @types/react-dom @types/react --save-dev
npm install --save-dev node-sass sass-loader
三、目录结构
project_name
    public
        index.html
    src
        component
            app
                app.scss
                app.tsx
        index.tsx
    babel.config.json
    package.json
    package-lock.json
    tsconfig.ts
    webpack.config.js
四、index.html文件内容
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React Starter</title>
</head>

<body>
<div id="root"></div>
<noscript>
    You need to enable JavaScript to run this app.
</noscript>
</body>

</html>
五、app.scss内容
body{
    color: red;
    div{
        color: greenyellow;
    }
}
六、app.tsx文件内容
import React,{FC,useState} from 'react'
import './app.scss'
interface AppProps {

}
export const App: FC<AppProps>  =(props)=>{
const [data, setData] = useState(null)
    return <article className={'app'}>
        hello react
    </article>
}
App.defaultProps = {}
export {App as default} from './app'
七、index.tsx文件内容
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./component/app/app"

ReactDOM.render(<App/>, document.getElementById('root'))
八、babel.config.json文件内容
{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}
九、package.json文件内容
{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "@types/react": "^17.0.36",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0"
  },
  "dependencies": {
    "core-js": "^3.19.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2"
  }
}
十、package-lock.json文件内容(随npm自动生成的,无需关注)
十一、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": false,
    "noEmit": false,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}
十二、webpack.config.js文件内容
const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    entry: path.resolve(__dirname, "src/index.tsx"),
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use:[
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11",
                                        },
                                        // 指定 corejs 的版本
                                        "corejs": "3",
                                        // 使用 corejs 的方式 "usage" 表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ],
                                [
                                    "@babel/preset-typescript",
                                ],
                                [
                                    "@babel/preset-react",
                                    {

                                    }
                                ]
                            ]
                        }
                    },
                    {
                        loader:"ts-loader"
                    }
                ],
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    {
                        loader:"style-loader",
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"sass-loader"
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public/index.html')
        }),
        new CleanWebpackPlugin({
            path: path.join(__dirname, 'build')
        })
    ]
}
十三、完成

启动命令:

npm run-script dev
上一篇:将下载下来的rpm包生成自己的yum源


下一篇:[EAP]将hostapd作为radius服务器搭建EAP认证环境