Блог

Как устранить дублирование модулей между пакетами с помощью webpack V4?

Если «модуль A» имеет зависимость от «модуля C» и генерирует пакет «index.js «. Если «модуль B» имеет зависимость от «модуля C» (той же версии) и генерирует пакет «index.js «.

Если «модуль D» имеет зависимость как с пакетом «модуль A», так и с пакетом «модуль B»: при проверке сгенерированного пакета я вижу, что код «модуля C» дублируется.

Каково решение для устранения дублирования кода в разных пакетах?

РЕДАКТИРОВАТЬ: Моя конфигурация webpack :

 var path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


var webpackConfigManager = function(){

    let outDir = path.join(process.cwd(), "dist");
    let inPath = path.join(process.cwd(), 'src/index.js')

    let config = {
        mode: 'production', 
        devtool:false,
        plugins: [
            new BundleAnalyzerPlugin()
          ],
        entry: [inPath],
        output: {
            path: outDir,
            filename: 'index.js',
            libraryTarget: "umd" 
        },
        resolve: {
            extensions: ['.js', '.jsx', '.css', '.scss'],
            symlinks:false
        },
        module: {
            rules: [
                {
                    enforce: "pre",
                    test: /.jsx?$/,
                    exclude: /node_modules|bower_components/,
                    loader: "eslint-loader",
                },
                {
                    test: /.s?css$/,
                    use: ['style-loader', {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                            importLoaders: 2,
                            sourceMap: true,
                            localIdentName: "[path][name]__[local]--[hash:base64:5]"
                        }
                    },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true,
                                includePaths: ['./']
                            }
                        }
                    ]
                },

                {
                    test: /.jsx?$/,
                    exclude: /node_modules|bower_components/,
                    use: {
                      loader: "babel-loader"
                    }
                },
            ]
        }
    };

    return config;
}

module.exports = env => {
return webpackConfigManager();
};
  

пример импорта :

 import MyComponent from "@myscope/myReactComponent";