webpack多入口 打包产物无法单个引用问题?

Question

src下有这三个入口文件 -
index.ts

import one from './one';
import two from './two';
export default {
    name: 999,
    one,
    two,
};
export const c = 9;

one.js

import lodash from "lodash";

export default lodash.ceil;

two.js

import lodash from "lodash";

export default lodash.cloneDeep;

webpack的entry配置

entry: {
        main: "./src/index.ts",
        one: "./src/one.js",
        two: "./src/two.js",
    },

这样配置,package.json中配置main: "main.js"为包入口,发布到npm上, 然后
我引用这个包

import data from 'testxx';
console.log(data) // data可以正常打印

这样打包的话就是每个入口文件都会有lodash打包进去,每个文件体积就会很大,,
接下来修改一下webpack配置
新增如下配置,抽离lodash

    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 10,
            minChunks: 1,
            cacheGroups: {
                defaultVendors: {
                    name:'vvv',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    reuseExistingChunk: true,
                },
            },
        },
    },

然后发布包
然后
我引用这个包

import data from 'testxx';
console.log(data) // data 打印的值为undefined

这是为什么,,抽离出公用的lodash之后就无法正常使用了

Answer 1

别用 splitChunks 啊。改 externals + peerDependencies