Webpack项目学习：React-cli（脚手架）-优化配置 -antd样式(antdesign)+减小打包体积

下载

npm i antd@4.24.2

引入

//引入样式文件
import "antd/dist/antd"

在main.js引入样式

//引入样式文件

import "antd/dist/antd.css"

// 使用React18
import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
//引入样式文件
import "antd/dist/antd.css"
//使用前端路由需要引入
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(

    <BrowserRouter>
        <App />
    </BrowserRouter>

);

给组件添加样式 button app.jsx

// import React from "react";
// import Home from "./pages/Home"
//Link导航链接 RoutesRoute加载显示路由链接
import { Link, Routes, Route } from "react-router-dom";
// import About from "./pages/About";
//使用路由懒加载-webpackChunkName取名字
import { Button } from "antd";
import React, { Suspense, lazy } from "react";

const Home = lazy(() => import(/* webpackChunkName: 'home' */ "./pages/Home"));
const About = lazy(() => import(/* webpackChunkName: 'about' */ "./pages/About"));

function App() {
  return (
    <div>
      <h1>App</h1>
      <Button type="primary">按钮</Button>
      <ul>
        <li>
          <Link to="/home">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </div>

  );
}

export default App;

在 create-react-app 中使用 - Ant Design-更改主题颜色

preProcessor对less-loader进行判断-是否存在

并且引入less样式

减小打包体积

splitChunks进行单独打包

        splitChunks: {
            chunks: "all",
           
            cacheGroups: {
                // layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
                // 可以单独打包，从而复用
                // 如果项目中没有，请删除
                layouts: {
                  name: "layouts",
                  test: path.resolve(__dirname, "../src/layouts"),
                  priority: 40,
                },
                // 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
                // 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
                // 如果项目中没有，请删除
                antd: {
                  name: "chunk-antd",
                  test: /[\\/]node_modules[\\/]antd(.*)/,
                  priority: 30,
                },
                // 将react相关的库单独打包，减少node_modules的chunk体积。
                react: { //减小代码体积-reac-dom react-router-dom一起打包成单独文件
                  name: "react",
                  test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
                  chunks: "initial",//打包文件名
                  priority: 20,//打包权重
                },
                libs: {//其他文件
                  name: "chunk-libs",
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10, // 权重最低，优先考虑前面内容
                  chunks: "initial",
                },
              },
        },

关闭性能提示 performance:false-提升打包速度

//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");

//提取样式成为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//对样式压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//对js压缩
const TerserPlugin = require("terser-webpack-plugin");
//复制静态资源文件到index目录下面
const CopyPlugin = require("copy-webpack-plugin");
//获取process进程上的env环境变量上的NODE_ENV
const isProduction = process.env.NODE_ENV === "production";

//js自动完成HMR功能
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const getStyleLoaders = (preProcessor) => {
    return [
        isProduction ? MiniCssExtractPlugin.loader : "style-loader",//生产模式提取成单独文件
        "css-loader",// //该模块将css资源编译成commonjs的模块到js中
        {//考虑兼容性问题-配合packafe.json中的browserslist来指定兼容性
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
            },
        },
        preProcessor && {
            loader: preProcessor,
            options:
              preProcessor === "less-loader"
                ? {
                    // antd的自定义主题
                    lessOptions: {
                      modifyVars: {
                        // 其他主题色：https://ant.design/docs/react/customize-theme-cn
                        "@primary-color": "#1DA57A", // 全局主色
                      },
                      javascriptEnabled: true,
                    },
                  }
                : {},
          },
    ].filter(Boolean);
}
module.exports = {
    // 入口
    entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
    // 输出
    output: {// 必须绝对路径
        //生产模式有输出
        path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//生产模式绝对路径需要更改
        // filename: 输出文件名-contenthash更好的做缓存
        filename: isProduction ? "static/js/[name].[contenthash:10].js" : "static/js/[name].js",
        //给打包输出的文件命名-动态导入
        chunkFilename: isProduction ? "static/js/[name].[contenthash:10].chunk.js" : "static/js/[name].chunk.js",
        // 图片、字体等资源命名方式（注意用hash）
        assetModuleFilename: "static/media/[name].[hash:10][ext][query]",
        clean: true,//自动将上次打包目录资源清空-无所谓哦
    },
    // 加载器-帮助识别不能识别的内容
    module: {//loader规则
        rules: [
            {
                //每个文件只能被其中一个loader配置处理
                oneOf: [
                    {
                        //css处理
                        test: /\.css$/i, // 用来匹配 .css 结尾的文件
                        use: getStyleLoaders(),
                    },
                    {
                        test: /\.less$/i, // 用来匹配 .less 结尾的文件
                        //loader:"xxx"只能使用1个loader
                        use: getStyleLoaders("less-loader"),
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: getStyleLoaders("sass-loader"),
                    },
                    {
                        test: /\.styl$/,
                        use: getStyleLoaders("stylus-loader"),
                    },
                    //处理图片
                    {
                        test: /\.(png|jpe?g|gif|webp|svg)/,
                        type: 'asset',//asset会转base64
                        parser: {//图片优化
                            dataUrlCondition: {
                                //小于10ke图片转base64
                                //优点：减少请求数量 缺点：体积会更大
                                maxSize: 10 * 1024 // 10kb
                            }
                        },
                    },
                    {//处理其他资源
                        test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则
                        type: "asset/resource",//不会转，原封不动输出
                    },
                    {
                        test: /\.jsx?$/,//处理的文件js+jsx
                        include: path.resolve(__dirname, "../src"), //只处理src文件
                        use: [
                            {
                                loader: "babel-loader",//只用一个
                                //提升性能
                                options: {
                                    cacheDirectory: true, // 开启babel编译缓存
                                    cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 
                                    plugins: [
                                        !isProduction && "react-refresh/babel",//js热更新
                                    ].filter(Boolean), // 减少代码体积
                                },
                            },//这里不考虑多线程
                        ]
                    },
                ],
            }]
    },
    // 插件-扩展功能
    plugins: [
        //检查eslint
        new ESLintPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默认值-排除不处理
            cache: true, // 开启缓存
            // 缓存目录
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
        }),
        //处理html资源 自动引入
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建新的html文件
            // 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        !isProduction && new ReactRefreshWebpackPlugin(),//激活jsHmr功能
        // 提取css成单独文件-只在生产模式
        isProduction && new MiniCssExtractPlugin( // 定义输出文件名和目录
            {
                // 定义输出文件名和目录
                filename: "static/css/[name].[contenthash:10].css",
                //动态导入也有css
                chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
            }),
        //复制public资源到index里面
        isProduction && new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "../public"),//将public包含index文件
                    to: path.resolve(__dirname, "../dist"),//复制到dist目录下 
                    globOptions: {
                        // 忽略index.html文件
                        ignore: ["**/index.html"],
                    },
                },
            ],
        }),
    ].filter(Boolean),//有可能有有可能没有需要过滤

    // 模式
    mode: isProduction ? "production" : "development",// 模式配置
    devtool:  isProduction ? "source-map" : "cheap-module-source-map",//设置调试更加友好
    //代码分割
    optimization: {
        splitChunks: {
            chunks: "all",
           
            cacheGroups: {
                // layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
                // 可以单独打包，从而复用
                // 如果项目中没有，请删除
                layouts: {
                  name: "layouts",
                  test: path.resolve(__dirname, "../src/layouts"),
                  priority: 40,
                },
                // 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
                // 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
                // 如果项目中没有，请删除
                antd: {
                  name: "chunk-antd",
                  test: /[\\/]node_modules[\\/]antd(.*)/,
                  priority: 30,
                },
                // 将react相关的库单独打包，减少node_modules的chunk体积。
                react: { //减小代码体积-reac-dom react-router-dom一起打包成单独文件
                  name: "react",
                  test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
                  chunks: "initial",//打包文件名
                  priority: 20,//打包权重
                },
                libs: {//其他文件
                  name: "chunk-libs",
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10, // 权重最低，优先考虑前面内容
                  chunks: "initial",
                },
              },
        },
        // 提取runtime文件
        runtimeChunk: {//会导致缓存失效-处理
            name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
        minimize: isProduction,//是否需要压缩控制 true 要 false不要
        //压缩css
        minimizer: [
            // css压缩也可以写到optimization.minimizer里面，效果一样的
            //压缩css
            new CssMinimizerPlugin(),
            // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
            //压缩js
            new TerserPlugin(),
        ],
    },
    // 开发服务器-自动编译
    // eslint-disable-next-line no-dupe-keys
    devServer: { // 开发服务器不会输出资源，再内存编译中打包
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要了）
        historyApiFallback: true, // 解决react-router刷新404问题
    },
    //webpack解析模块加载选项
    resolve: {
        //自动补全文件扩展名
        extensions: ['.jsx', '.js', '.json']
    },
    performance:false
};