Webpack prod build build для незавершенных / разрабатываемых версий React и React-Dom - PullRequest
0 голосов
/ 21 мая 2019

Ниже приведена моя базовая конфигурация веб-пакета:

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);
}

, и это производственная конфигурация веб-пакета:

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'
            }),
        ]
    });
}

Как показано в файле базового веб-пакета, mod.external.modules связоквсе в node_modules в external.modules.js файле.Но когда я запускаю производственную сборку и анализирую комплект, он показывает, что он связал незавершенную версию для разработки как React, так и React-Dom, когда вместо этого он должен был получить свернутые версии из соответствующей папки node_modules.

Команда, которую я использую для prod: tslint -p . --config tslint.prod.json && webpack --config ./webpack.prod.js

Как мне сделать так, чтобы моя сборка prod включала уменьшенную версию React и React-Dom?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...