Skip to content
On this page

使用webpack搭建react脚手架

利用我们前面所学的知识,我们将使用webpack搭建react的教授架

脚手架的开发环境搭建

1. 新建文件夹webpack-react-cli

2. 新建文件config/webpack.dev.js

文件中填写以下的内容

Details
js
const path = require("path")
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const getStyleLoader = (rest = []) => {
  return [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: ['postcss-preset-env']
        }
      }
    },
    ...rest
  ]
}

module.exports = {
  entry: path.resolve(__dirname, '../src/index.js'),

  output: {
    filename: undefined,
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: 'static/js/[name].chunk.js',
    assetModuleFilename: 'media/[hash:10][ext][query]'
  },
  module: {
    rules: [
      // 处理css
      {
        test: /.css$/,
        use: getStyleLoader()
      },
      {
        test: /.less$/,
        use: getStyleLoader(['less-loader'])
      },
      // 处理图片
      {
        test: /\.(jp?eg|png|gif|svg|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片转换为base64
          }
        }
      },
      // 处理其他资源
      {
        test: /\.(woff2?|ttf)$/,
        type: 'asset/resource'
      },
      // 处理js
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [require.resolve('react-refresh/babel')] // react hmr

        }
      }
    ]
  },
  plugins: [
    new EslintWebpackPlugin({
      context: path.resolve(__dirname, '../src'),
      cache: true,
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslint-cache')
    }),
    new ReactRefreshWebpackPlugin(), // react hmr插件
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html'),
      title: 'react-app'
    }),
  ],
  mode: 'development',
  devtool: 'cheap-module-source-map',
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: {
      name(entryPoint) {
        return `${entryPoint}-runtime.js`
      }
    }
  },
  devServer: {
    hot: true,
    port: 3001,
    open: true,
    host: 'localhost',
    historyApiFallback: true // 解决react-router 404的问题

  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'] // 解决jsx的引入问题
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

3. 增加babel和eslint的配置文件

.eslintrc.js

js
module.exports = {

  extends: ["react-app", "react-app/jest"],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    "no-var": 2 // 不可以使用var来定义变量
  },
  env: {
    browser: true,
    es2021: true,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

babel.config.js

js
module.exports = {
  presets: ['react-app'],
}
1
2
3

4. 增加package.json

package.json

json
{
  "name": "webpack-react-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack server --config ./config/webpack.dev.js",
    "start": "npm run dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "babel-loader": "^8.2.5",
    "babel-preset-react-app": "^10.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^11.0.0",
    "postcss-loader": "^7.0.0",
    "postcss-preset-env": "^7.7.2",
    "react-refresh": "^0.14.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

5. 简单的写一些react的组件

src/index.js

js
import React from 'react'
import ReactDom from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
const root = ReactDom.createRoot(document.getElementById('app'))
root.render(<BrowserRouter>
  <App />
</BrowserRouter>)
1
2
3
4
5
6
7
8

src/app.jsx

jsx
import React, { useState } from "react";
import { Link, Route, Routes } from "react-router-dom";
import About from "./About";

import "./global.less";
import Home from "./Home";

const App = (props) => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button
        onClick={(e) => {
          setValue(value + 1);
        }}
        className="button"
      >
        click{value}-66688889999
      </button>
      <div>
        <Link to={`/home`}>home</Link>
        <br />
        <Link to={`/about`}>about</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

src/Home.jsx

jsx
import React from 'react'
const Home = (props) =>{
  return(
    <div>
      Home
    </div>
  )
}
export default Home
1
2
3
4
5
6
7
8
9

src/About.jsx

jsx
import React from 'react'
const About = (props) =>{
  return(
    <div>
      About
    </div>
  )
}
export default About
1
2
3
4
5
6
7
8
9

启动开发环境

sh
npm i
npm start
1
2

搭建react脚手架生产环境