zhongze-front/config/webpack.prod.js

const path = require("path");
const webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const {
    CleanWebpackPlugin
} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({
    size: os.cpus().length
});

const common = require("./common");
const pathVars = require("./pathVars");
const pageVars = require("./pageVars");

//---------------------------------- output -----------------------------------//
const packageJson = require("./../package.json");
const entryConfig = {};

let pages = pageVars.getPages();
console.log("pages", pages);
pages.forEach(function (page) {
    entryConfig[page["chunkName"]] = page["entryJs"];
});

//---------------------------------- output -----------------------------------//

let outputConfig = {
    path: pathVars.distPath,
    publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
    filename: "[name]/index.js",
    assetModuleFilename: 'images/[name]_[hash][ext][query]'
    //chunkFilename: '[name]/index_[hash].chunk.js'
};

let pluginConfig = [
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: [pathVars.distPath + '/*'],
    }),
    // new webpack.ProvidePlugin({
    //     'THREE': require.resolve('three')
    // }),
    new MiniCssExtractPlugin({
        filename: "[name]/index.css",
    }),
    new HappyPack({
        id: 'babel',
        loaders: ["babel-loader"],
        threadPool: happyThreadPool
    }),
    new CopyWebpackPlugin({
        patterns: [{
            from: pathVars.devPath,
            to: pathVars.distPath
        }]
    })
];
pages.forEach(function (page) {
    let htmlPlugin = new HtmlWebpackPlugin({
        title: 'page1',
        template: page["filePath"],
        filename: page["htmlName"],
        inject: 'body',
        chunks: [page["chunkName"]]
        //chunks: ["manifest", "vendor", "common", page["chunkName"]],
        //chunksSortMode: 'dependency'
    });
    pluginConfig.push(htmlPlugin);
});


module.exports = {
    mode: 'production',
    entry: entryConfig,
    output: outputConfig,
    resolve: common.resolve,
    module: {
        rules: [{
                test: /\.(css|less)$/,
                include: [pathVars.srcPath],
                exclude: [pathVars.nodeModulesPath],
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
                            publicPath: '../'
                        },
                    },
                    //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
                    "css-loader",
                    "less-loader"
                ],
            },
            {
                test: /\.tpl$/i,
                use: [{
                    loader: 'raw-loader',
                    options: {
                        esModule: false,
                    },
                }]
            },
            {
                test: /\.js$/,
                exclude: pathVars.nodeModulesPath,
                include: pathVars.srcPath,
                //use: ['babel-loader'],
                use: ["happypack/loader?id=babel"]
            },
            {
                test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
                //利用HappyPack打包，图片会损坏。暂时不使用
                //use: ["happypack/loader?id=url"]
            },
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
                use: ["raw-loader", "glslify-loader"]
            }
        ]
    },
    plugins: pluginConfig,
    optimization: {
        //minimize: true,
        minimizer: [
            new TerserPlugin()
        ],
        usedExports: true,
        runtimeChunk: 'single',
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                    priority: -10,
                    reuseExistingChunk: true,
                },
                // 其他不是node_modules中的模块
                default: {
                    name:"common",
                    minChunks: 2, //如果有被引用不少于2次
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }

        }
    }
};