Webpack产品构建将React和React-Dom的最小版本/开发版本捆绑在一起

时间:2019-05-21 06:50:50

标签: reactjs webpack

以下是我的基本webpack配置:

const _ = require("lodash");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const defaults = (tsConfigFile, babelPresets) => {
    return {
        entry: {
            "moduleOne": "./src/ModOne.tsx",
            "moduleTwo": "./src/ModTwo.tsx",
            "moduleThree": "./src/ModThree.tsx",
            "moduleFour": "./src/ModFour.tsx",
            "moduleFive": "./src/ModFive.tsx"
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    "mod.styled": {
                        test: /[\\/]node_modules[\\/]styled-components[\\/]/,
                        name: "styled",
                        chunks: "all",
                        priority: 3,
                    },
                    "mod.external.modules": {
                        test: /[\\/]node_modules[\\/]/,
                        name: "external.modules",
                        chunks: "all",
                        priority: 1,
                    },
                }
            },
            runtimeChunk: {
                name: "chunky.runtime"
            }
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".json", "*.png", "*.jpg", "*.svg"],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    include: /src/,
                    loader: "ts-loader",
                    options: {
                        configFile: tsConfigFile,
                    },
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    options: {
                        presets: babelPresets,
                    },
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: [
                    'url-loader?limit=10000',
                    'img-loader'
                    ]
                },
                {
                    test: /\.css$/,
                    include: /src/,
                    exclude: /node_modules/,
                    loader: ExtractTextPlugin.extract('typings-for-css-modules-loader?modules&namedExport&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
                },
                {
                    test: /\.css$/,
                    include: /node_modules/,
                    loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
                },
                {
                    test: /\.svg$/,
                    loader: 'svg-loader?pngScale=2'
                }
            ]
        },
    };
}

module.exports.defaults = defaults;
module.exports.merge = function merge(tsConfigFile, babelPresets, config) {
    return _.merge({}, defaults(tsConfigFile, babelPresets), config);
}

这是生产webpack配置:

const base = require("./webpack.base");
const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = (env, argv) => {
    let outputPrefix = '';
    if(env && env.version) {
        outputPrefix = env.version;

        if (argv.buildNumber) {
            outputPrefix += "." + argv.buildNumber;
        }

        outputPrefix += '/';
    }

    return base.merge("tsconfig.json", ["es5"], {
        mode: "none",
        output: {
            filename: outputPrefix + '[name].min.js',
            path: path.resolve(__dirname, 'dist'),
        },
        plugins: [
            new UglifyJSPlugin(),
            new ExtractTextPlugin(outputPrefix + '[name].min.css'),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorOptions: { discardComments: { removeAll: true } },
                canPrint: true
            }),
            // Uncomment the bundle analyzer to generate a view of the output files and what they contain
            new BundleAnalyzerPlugin({
                 analyzerMode: 'static'
            }),
        ]
    });
}

如基本Webpack文件中所示,mod.external.modulesnode_modules中的所有内容捆绑在external.modules.js文件中。但是,当我运行生产构建并分析捆绑软件时,它表明它捆绑了React和React-Dom的未精简版开发版本,相反,它应该从各自的node_modules文件夹中获得精简版。 >

我用于生产的命令是: tslint -p . --config tslint.prod.json && webpack --config ./webpack.prod.js

如何使我的产品构建包含最小版本的React和React-Dom?

0 个答案:

没有答案