0

我们有 4 个与 Webpack（版本 1）捆绑的 React 组件：A、B、C 和 D。依赖关系树如下所示：

  • 一个
    • 乙
      • D
    • C
      • D

我们希望每个组件都是可重用的，所以我们使用 webpack 来生成一个 UMD 模块。为每个组件生成的 bundle 位于 中./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's 内部重复./dist/index.js。

我们尝试使用 Dedupe 插件无济于事。似乎 webpack 无法在已经捆绑的 dist B 和 C 文件中“看到”以从 D 中提取公共代码。 webpack 不能检测到它们自己生成的两个捆绑包之间的重复项吗？

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

有任何想法吗？

4

0 回答 0