自己配置react项目

webpack.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

function getStyle(pre) {
    return [
        MiniCssExtractPlugin.loader,
       'css-loader',
       {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins: [
               [
                 'postcss-preset-env',
                 {
                   // 其他选项
                 },
               ],
             ],
           },
         },
       },
       pre
     ].filter((item) => {
        return item
     })
}
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[contenthash:10].js',
        chunkFilename: 'static/js/[name].[contenthash:10].chunk.js',
        assetModuleFilename: 'static/media/[contenthash:10][ext][query]',
    },
    module: {
        rules: 
        [
            {
            oneOf: [
            {
                test: /\.css$/i,
                use: getStyle()
            },
            {
                test: /\.less$/i,
                use: getStyle("less-loader")
            },
            {
                test: /\.s[ac]ss$/i,
                use: getStyle("sass-loader")
            },
            {
                test: /\.styl$/,
                use: getStyle("stylus-loader")
            },
            {
                test: /\.styl$/,
                use: getStyle("stylus-loader")
            },
            {
                test: /\.(bmp|gif|jpe?g|png|svg)/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 4kb
                    }
                }
            },
            {
                test: /\.(woff2?|ttf|tof)/,
                type: 'asset/resource',
            },
            {
                test: /\.m?jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    cacheDirectory: true,
                    cacheCompression: false
                  }
                }
            },
            ]
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
          new CssMinimizerPlugin(),
          new TerserPlugin()
        ],
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
        },
    },
    plugins: [
        new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html') }),
        new MiniCssExtractPlugin({
            filename: 'static/style/[name].[contenthash:10].css',
            chunkFilename: 'static/js/[name].[contenthash:10].chunk.css',
        }),
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'),
        }),
        new ReactRefreshWebpackPlugin()
    ],
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        port: 3000,
        historyApiFallback: true,
        hot: true,
        open: true
    }
}

webpack.prod.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

function getStyle(pre) {
    return [
        MiniCssExtractPlugin.loader,
       'css-loader',
       {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins: [
               [
                 'postcss-preset-env',
                 {
                   // 其他选项
                 },
               ],
             ],
           },
         },
       },
       pre
     ].filter((item) => {
        return item
     })
}
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[contenthash:10].js',
        chunkFilename: 'static/js/[name].[contenthash:10].chunk.js',
        assetModuleFilename: 'static/media/[contenthash:10][ext][query]',
        clean: true
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.css$/i,
                        use: getStyle()
                    },
                    {
                        test: /\.less$/i,
                        use: getStyle("less-loader")
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: getStyle("sass-loader")
                    },
                    {
                        test: /\.styl$/,
                        use: getStyle("stylus-loader")
                    },
                    {
                        test: /\.styl$/,
                        use: getStyle("stylus-loader")
                    },
                    {
                        test: /\.(bmp|gif|jpe?g|png|svg)/,
                        type: 'asset',
                        parser: {
                            dataUrlCondition: {
                                maxSize: 10 * 1024 // 4kb
                            }
                        }
                    },
                    {
                        test: /\.(woff2?|ttf|tof)/,
                        type: 'asset/resource',
                    },
                    {
                        test: /\.m?jsx?$/,
                        exclude: /(node_modules|bower_components)/,
                        use: {
                          loader: 'babel-loader',
                          options: {
                            cacheDirectory: true,
                            cacheCompression: false
                          }
                        }
                    },
                ]
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
          new CssMinimizerPlugin(),
          new TerserPlugin()
        ],
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
        },
    },
    plugins: [
        new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html') }),
        new MiniCssExtractPlugin({
            filename: 'static/style/[name].[contenthash:10].css',
            chunkFilename: 'static/js/[name].[contenthash:10].chunk.css',
        }),
        new ESLintPlugin({
            context: path.resolve(__dirname, '../src'),
        }),
    ],
    mode: 'production',
    devtool: 'source-map',
}