React-Cli配置

开发模式配置

安装

npm i eslint eslint-webpack-plugin html-webpack-plugin style-loader css-loader postcss-loader postcss-preset-env less-loader sass sass-loader stylus-loader -D
npm i babel-loader @babel/core babel-preset-react-app @babel/plugin-syntax-js eslint-config-react-app @pmmmwh/react-refresh-webpack-plugin react-refresh -D
npm i webpack-dev-server webpack webpack-cli -D
npm i react react-dom react-router-dom
npm i cross-env -D

目录

package.json

{
   
  "name": "react-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
   
    "@babel/core": "^7.19.3",
    "@babel/plugin-syntax-jsx": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
    "babel-loader": "^8.2.5",
    "babel-preset-react-app": "^10.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "eslint": "^8.25.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^11.1.0",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "react-refresh": "^0.14.0",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "stylus-loader": "^7.1.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
   
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2"
  }
}

webpack.dev.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 getStyleLoaders = (pre) => {
   
  return [
    "style-loader",
    "css-loader",
    {
   
      // 处理css兼容性问题
      // 配合package.json中browserslist来指定兼容性
      loader: "postcss-loader",
      options: {
   
        postcssOptions: {
   
          plugins: ["postcss-preset-env"],
        },
      },
    },
    pre,
  ].filter(Boolean);
};

module.exports = {
   
  entry: "./src/main.js",
  output: {
   
    path: undefined,
    filename: "static/js/[name].js",
    chunkFilename: "static/js/[name].chunk.js",
    assetModuleFilename: "static/media/[hash:10][ext][query]",
  },
  module: {
   
    rules: [
      // 处理css
      {
   
        test: /\.css$/,
        use: getStyleLoaders(),
      },
      {
   
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
   
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
   
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      // 处理图片
      {
   
        test: /\.(jpe?g|png|gif|webp|svg)$/,
        type: "asset", // 可以转为base64
        parser: {
   
          dataUrlCondition: {
   
            maxSize: 10 * 1024,
          },
        },
      },
      // 处理其他资源
      {
   
        test: /\.(woff2?|ttf)$/,
        type: "asset/resource", //原封不动输出
      },
      // 处理Js
      {
   
        test: /\.jsx?$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
   
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [
            "react-refresh/babel", // 激活js的HMR
          ],
        },
      },
    ],
  },
  plugins: [
    new EslintWebpackPlugin({
   
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    // 处理html
    new HtmlWebpackPlugin({
   
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 解决js的HRM功能运行时全局变量的问题
    new ReactRefreshWebpackPlugin(),
  ],
  mode: "development",
  devtool: "cheap-module-source-map",
  optimization: {
   
    splitChunks: {
   
      chunks: "all",
    },
    runtimeChunk: {
   
      name: (entrypoint) => `runtime~${
     entrypoint.name}.js`,
    },
  },
  // webpack解析模块加载选项
  resolve: {
   
    // 自动补全文件扩展名
    extensions: [".jsx", ".js", ".json"],
  },
  devServer: {
   
    host: "localhost",
    port: 3000,
    open: true,
    hot: true, // 开启HMR
    historyApiFallback: true, // 解决前端路由刷新404问题
  },
};

babel.config.js

module.exports = {
   
  p