hm-react-cli/webpack/webpack.config.prod.js

Create a Huimei React project by module

const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const es3ifyPlugin = require('es3ify-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //js压缩
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清空
const CopyWebpackPlugin = require('copy-webpack-plugin'); //复制静态html
const ReplaceHtmlPlugin = require('./plugins/ReplaceHtmlPlugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const webpackBase = require('./webpack.config.base');

const resolve = path.resolve;
function baseResolve(dir) {
    return path.join(__dirname, '..', dir);
}

const DISTPATH = 'release';

// 合并配置文件
module.exports = function main(config) {
    const { pageBasePath, distBasePath, pages = [] } = config;

    const webpackConfig = pages.map((pageName) =>
        merge(webpackBase({ ...config, pageName, mode: 'prod',multiple:pages.length>1 }), {
            mode: 'production',
            devtool: 'source-map', //cheap-eval-source-map  是一种比较快捷的map,没有映射列
            stats: 'none',
            plugins: [
                ...getClearPlugin(config),
                // DefinePlugin 允许创建一个在编译时可以配置的全局常量，可以在JS文件中根据这些定义的变量来定义不同的行为
                new webpack.DefinePlugin({
                    'process.env': resolve(pageBasePath, './prod.env')
                }),

                getCopyWebpackPlugin(config),

                new webpack.HashedModuleIdsPlugin(),
                new webpack.DllReferencePlugin({
                    context: '/',
                    manifest: require(baseResolve('dll/manifest.json'))
                }),
                new ReplaceHtmlPlugin({}),
                new es3ifyPlugin(),
                new ProgressBarPlugin({
                    width: 100,
                    clear: true
                }),
                new FriendlyErrorsWebpackPlugin({
                    compilationSuccessInfo: {
                        notes: [
                            `${cyan('The current build page module is：')}` + ` [ ${blue(pages.join('、'))} ] `,
                            `${cyan('The construction path is：')} ${blue(resolve(distBasePath, DISTPATH))}`
                        ]
                    },

                    clearConsole: true
                })
            ],
            optimization: {
                minimizer: [
                    new UglifyJsPlugin({
                        parallel: true,
                        cache: true,
                        sourceMap: true,
                        uglifyOptions: {
                            ie8: true,
                            output: {
                                comments: false,
                                beautify: false
                            },
                            compress: {
                                properties: false,
                                drop_console: false,
                                drop_debugger: true
                            }
                        },
                        exclude: /(node_modules|bower_components)/
                    })
                ],
                splitChunks: {
                    chunks: 'async',
                    minSize: 200,
                    // minRemainingSize: 0,
                    minChunks: 1,
                    maxAsyncRequests: 30,
                    maxInitialRequests: 30,
                    cacheGroups: {
                        vendors: {
                            name: 'chunk-vendors',
                            test: /[\\/]node_modules[\\/]/,
                            priority: -10,
                            chunks: 'initial'
                        },
                        common: {
                            name: 'chunk-common',
                            minChunks: 2,
                            priority: -20,
                            chunks: 'initial',
                            reuseExistingChunk: true
                        }
                    }
                }
            }
        })
    );
    const compiler = webpack(webpackConfig);

    compiler.run((err, stats) => {
        if (err || stats.hasErrors()) {
            // 在这里处理错误
            console.log(err);

            return;
        }
    });
};

function getClearPlugin(config) {
    const { inDunshan, distBasePath } = config;

    const cleanPlugin = inDunshan
        ? []
        : [
              new CleanWebpackPlugin([DISTPATH], {
                  root: distBasePath,
                  verbose: false
              })
          ];
    return cleanPlugin;
}

function getCopyWebpackPlugin(config) {
    const { inDunshan, distBasePath, pageBasePath } = config;
    const destPath = inDunshan ? resolve(DISTPATH, 'WebRoot') : resolve(DISTPATH);
    const assetsConfig = [];

    if (!inDunshan) {
        assetsConfig.push({
            context:resolve(process.cwd(), config.assetsDir),
            from: config.assetsDir
                ? 'assets/**'
                : resolve(pageBasePath, 'assets/**'),
            to: resolve(distBasePath, destPath)
        });
    }

    return new CopyWebpackPlugin([
        { from: baseResolve('dll/Dll.js'), to: resolve(distBasePath, destPath) },
        ...assetsConfig
    ]);
}

function blue(str) {
    return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m';
}

function cyan(str) {
    return '\x1B[36m' + str + '\x1B[0m';
}