webpack实用配置dev--react（一）_react webpack配置-CSDN博客

本文链接：https://blog.csdn.net/qq_27829333/article/details/130515554

一直以来都是使用脚手架创建应用，现在有空认真研究了一下webpack5，从零开始搭建项目，受益颇多，记下心得，以供参考，生产环境请参考生产环境配置。

准备工作

新建项目空白目录，并运行npm init -y 命令，初始化包管理配置文件 package.json
新建config目录 -> webpack.dev.js，webpack开发环境配置
新建public目录 -> index.html
新建src目录 -> main.js、app.jsx

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="favicon.ico" ref="shortcut" type="image/x-iocn" />
  <title>Webpack React Cli</title>
</head>
<body>
  <div id="app"></div>
</body>
<!-- 通过插件自动引入 html-webpack-plugin-->
<!-- <script src="../dist/static/js/main.js"></script> -->
</html>

// main.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>
);

// App.jsx
import React, { lazy, Suspense } from "react";
import { Link, Route, Routes } from "react-router-dom";
// 路由懒加载
const Home = lazy(() => import(/* webpackChunkName: 'home' */ "./pages/Home"));
const About = lazy(() => import(/* webpackChunkName: 'about' */"./pages/About"));
function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>
      <Suspense>
        <Routes fallback={<div>loading</div>}>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </Suspense>
    </div>
  );
}
export default App;

配置 package.json

在这里把所有需要的依赖全部安装一下

{
   
   
  "name": "webpack_react_cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
   
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack server --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
   
   
    "@babel/core": "^7.21.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^9.1.2",
    "babel-preset-react-app": "^10.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "eslint": "^8.39.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^5.5.1",
    "image-minimizer-webpack-plugin": "^3.8.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss-loader": "^7.3.0",
    "postcss-preset-env": "^8.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "react-refresh": "^0.14.0",
    "sass-loader"