Question

我们有4个与Webpack（版本1）捆绑在一起的React组件：A，B，C和D.依赖树看起来像这样：

甲
- 乙
  - D
- Ç
  - D

我们希望每个组件都可以重用，因此我们使用webpack生成UMD模块。每个组件生成的包位于./dist/index.js，每个组件的 package.json 将此脚本设置为库的入口点：

"main": "./dist/index.js"

这是组件A的webpack配置文件：

const webpack = require('webpack');
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

var reactExternal = {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
};
var reactDOMExternal = {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
};

module.exports = {
    entry: {
        index: ['./src/index.js'],
        'index.min': ['./src/index.js']
    },

    output: {
        path: './dist/',
        filename: '[name].js',
        library: 'ComponentA',
        libraryTarget: 'umd'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new UglifyJsPlugin({
            include: /\.min\.js$/,
            minimize: true,
            compress: {
                warnings: false
            }
        })
    ],

    externals: {
        react: reactExternal,
        'react-dom': reactDOMExternal
    },

    devtool: 'source-map'
};

B，C和D组件的其余webpack配置文件是相同的，但更改要在output.library中导出的库的名称，因此对于组件B

outpub.library: 'ComponentB',

用于组件C

output.library: 'ComponentC',

和组件D

output.library: 'ComponentD',

除了A的捆绑尺寸外，一切正常。捆绑包太重了，因为D在A ./dist/index.js内部重复。

我们尝试过使用Dedupe插件无济于事。似乎webpack无法看到＆＃39;在已捆绑的dist B和C文件中，从D中提取公共代码。是不是webpack能够检测两个自己生成的bundle之间的重复？

我们还尝试更改package.json文件，以便主条目是非转换版本＆＃34; main＆＃34;：＆＃34; ./ src / index.js＆＃34;。这允许webpack检测D重复，但是这个解决方案不合适，因为我们的组件没有非转换的ES6入口点。

有什么想法吗？

使用与Webpack捆绑在一起的React组件会导致子模块重复

0 个答案: