React -搭建项目使用webpack

项目初始化

首先需要准备一个文件 进行初始化

mkdir react-web  创建一个文件 叫 react-web mldir 是创建命令
cd react-web  cd 进入 这个项目文件
npm init -y

安装基础依赖

需要在package.json 里配置

{
  "name": "react-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config config/webpack.prod.js",
    "start": "webpack serve --config config/webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "chalk": "^4.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.1.0",
    "html-webpack-plugin": "^5.2.0",
    "ip": "^1.1.5",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.7.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "speed-measure-webpack-plugin": "^1.4.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "antd": "^4.22.4",
    "babel-preset-react-app": "^10.0.1",
    "co": "^4.6.0",
    "lodash": "^4.17.21",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^8.0.2",
    "react-router-dom": "^5.3.0",
    "redux": "^4.2.0",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.4.1"
  }
}

webpack 配置

区分生产开发环境

touch webpack.common.js # 开发环境 和 生产环境 公共配置 存放在这个文件里面
touch webpack.dev.js # 需要针对开发环境特殊处理的配置存放在这里 
touch webpack.prod.js # 需要针对生产环境特殊处理的配置存放在这里
touch paths.js 创建路径调用的配置文件

设置公共环境配置
webpack.common.js 文件

const paths = require("./paths");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 返回处理样式的loader 的函数
const getStyleLoader = (pre) => {
  return [
    "style-loader",
    "css-loader",
    {
      // 处理css 兼容性问题
      // 配合package.json 中 browserslist 来指定兼容性
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"],
        },
      },
    },
    pre,// 处理 sass less stylus
  ].filter(Boolean);
};

module.exports = function (options) {
    console.log(options,'options');
  return {
    mode: options.mode,
    entry: paths.appSrc,
    resolve: {
        alias: {
          '@': paths.appSrc,
        },
      },
    output: {
      path: paths.appBuild,
      publicPath: "/",
    },
    cache: {
      // 使用持久化缓存
      type: "filesystem", //memory:使用内容缓存 filesystem：使用文件缓存
    },
    devtool: false,
    module: {
      rules: [
        // 处理css
        {
          test: /\.css$/,  
          use: getStyleLoader(),
        },
        {
          test: /\.less$/,
          use: getStyleLoader("less-loader"),
        },
        {
          test: /\.s[ac]ss$/,
          use: getStyleLoader("sass-loader"),
        },
        {
          test: /\.styl$/,
          use: getStyleLoader("stylus-loader"),
        },
        // 处理图片
        {
         test:/\.(jpe?g|png|svg|gif|webp)/,
         type:"asset",
         parser:{
            dataUrlCondition: {
                maxSize: 10 * 1024,
            },
         }
        },
        // 处理其他资源
        {
            test:/\.(woff?g|woff)/,
            type:"asset/resource",
        },
        // 处理js
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader",
               
            },
          ],
        },
      ],
    },
 devServer:options.devServer||{},
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.html",
      }),
      ...options.plugins,
    ],
    stats: options.stats, // 打包日志发生错误和新的编译时输出
  };
};

webpack.dev.js 开发环境的配置

module.exports = require("./webpack.common")({
    mode: "development",
    plugins: [],
    stats: "errors-only", //只在发生错误或有新的编译时输出
    devServer: {
        headers: {
          'Access-Control-Allow-Origin': '*'
        },
        open: true, // 自动在浏览器打开
        sockHost: 'localhost',
        disableHostCheck: true, // 防止一直发起socket检测请求
        proxy: {
          '/': {
            target: 'https://api.wpbom.com/api/',
            changeOrigin: true,
            pathRewrite: {
   '^/': '/' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
            }
          }
        },
        hot: true
      },
});

webpack.prod.js 生产环境的配置

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //打包前清空build目录文件
const ProgressBarPlugin = require("progress-bar-webpack-plugin"); // 打包进度条美化
const chalk = require("chalk");

module.exports = require("./webpack.common")({
    mode: "production",
    devtool: "source-map",
    plugins: [
        new CleanWebpackPlugin(),
        new ProgressBarPlugin({
            format:
                `${chalk.green.bold("build[:bar]")} ` +
                chalk.green.bold(":percent") +
                " (:elapsed seconds)",
            clear: false,
            width: 60,
        }),
    ],
    stats: "normal", //标准输出
});

babel.config.js 用于转换es5

module.exports ={
    presets: ["@babel/preset-env", "@babel/preset-react"]
}

配置public 作为react 渲染容器

<!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" />
        <title>Webpack-React-Cli</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

根目录配置入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App'

ReactDOM.render(<App />, document.querySelector("#root"));

配置目录

components 存放一般公用组件
reducers 处理接口数据
router 集中式路由管理
views 路由式组件