Webpack分包共享文件

Question

webpack 5.26

我有公共文件js，它是跨包使用的通用函数。

CommonFunctions

• Fun1
• Fun2

Budle1

• CommonFunction - Fun1

Bundle2

• CommonFunction - Fun2

如果对CommonFunction有任何更改。Bundle1和Budle2由webpack更新

只需要适当的包就应该更新。这里webpack配置文件

  module.exports = {
    entry: {
        bundle1: './bundle1.ts',
        bundle2: './bundle2.ts'
    },
    resolve: {
        extensions: ['.ts'] // add your other extensions here
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "../JsFiles"),
        library: "testCommon",

    },
    module: {
        rules: [{ test: /\.ts$/, use: 'awesome-typescript-loader' }],
    },

    mode: 'development'
}


--CommonFunctions.ts
export class CommonFunctions {
    Fun1() { };
    Fun2() { };
}

--bundle1.ts

import CommonFunctions from '../Js'
export class bundle1 {
    b1() { CommonFunctions.Fun1 }
}

--bundle2.ts
import CommonFunctions from '../Js'
export class bundle2 {
    b2() { CommonFunctions.Fun2 }
}

如何用webpack制作共用共享好友的文件/模块？

Answer 1

optimization: {
    splitChunks: {
        cacheGroups: {
            Util: {
                test: path.resolve(__dirname, 'CommonFunctions'),
                name: 'CommonFunctions',
                enforce: true,
                chunks: "all"
            },
            
        },
    },
},

通过创建单独的块，webpack被创建为分离的JS文件，现在我可以单独加载公共文件。