DMA/build/webpack.config.js

const utils = require("./utils");
const path = require("path");
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

function resolve(dir) {
    return path.join(__dirname, "..", dir);
}

module.exports = (env) => {
    console.log("process.env.NODE_ENV", env.NODE_ENV);
    return {
        mode: 'production',
        entry: {
            app: './src/index.js'
        },
        context: utils.pathResolve(),
        output: {
            filename: 'static/js/[name].js',
            path: utils.pathResolve("dist"),
        },

        resolve: {
            extensions: [".js", ".vue", ".json", ".scss"],
            alias: {
                "@": utils.pathResolve("src"),
            }
        },
        externals: {
            vue: "Vue",
            lodash: "_",
            echarts: "echarts",
            "xlsx-js-style": "XLSX",
            "maplibre-gl": "maplibregl",
        },
        
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                    options: {
                        esModule: false,
                    }
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader'
                },
                {
                    test: "/\.css$/",
                    use: [
                        env.NODE_ENV !== 'production'
                            ? 'vue-style-loader'
                            : MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        env.NODE_ENV !== 'production'
                            ? 'vue-style-loader'
                            : MiniCssExtractPlugin.loader,
                        // 将 CSS 转化成 CommonJS 模块
                        {
                            loader: 'css-loader',
                            options: { importLoaders: 1 }
                        },
                        // 将 Sass 编译成 CSS
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    quietDeps: true,
                                    outputStyle: 'compressed'
                                }
                            }
                        }
                    ],
                },
                {
                    test: /\.md$/,
                    use: ["text-loader"],
                },
                {
                    test: /\.svg$/,
                    loader: "svg-sprite-loader",
                    include: [resolve("src/icons")],
                    options: {
                        symbolId: "icon-[name]",
                    },
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: "url-loader",
                    exclude: [resolve("src/icons")],
                    options: {
                        limit: 1,
                        name: utils.assetsPath("img/[name].[hash:7].[ext]"),
                    },
                },
                {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: utils.assetsPath("media/[name].[hash:7].[ext]"),
                    },
                },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: utils.assetsPath("fonts/[name].[hash:7].[ext]"),
                    },
                },
                {
                test: require.resolve("lodash"),
                    loader: "expose-loader",
                    options: {
                        exposes: {
                            globalName: "_",
                            moduleLocalName: "lodash",
                        },
                    },

                },
                {
                    test: require.resolve("moment"),
                    loader: "expose-loader",
                    options: {
                        exposes: {
                            globalName: "moment",
                            moduleLocalName: "moment",
                        },
                    },

                }
            ]
        },
        // 优化
        optimization: {
            splitChunks: {
                // 提高到50KB
                minSize: 50000,
                // 最大尺寸约240KB
                minSizeReduction: 50000,
                // 设置最大尺寸约240KB
                maxSize: 244000,

                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/](vue|element-ui|moment)[\\/]/,
                        name: 'vendors',
                        chunks: 'all',
                    },
                    // 添加common组提取公共模块
                    common: {       
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            },
            // 添加其他优化配置
            removeEmptyChunks: true,
            mergeDuplicateChunks: true
        },

        plugins: [
            // 请确保引入这个插件！
            new VueLoaderPlugin(),
            
            new HtmlWebpackPlugin({
                inject: true,
                template: "index.html",
                title: "分区计量漏损控制系统",
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true,
                },
                chunks: ["manifest", "vendor", "app"],
            }),
        ]
    }
};