Webpack 分別跨包共享文件

Question

使用 webpack 5.26

我有通用文件 js，通用 function 跨包使用

常用功能

• 樂趣1
• 樂趣2

布德爾1

• 通用功能 - Fun1

捆綁包2

• 通用功能 - Fun2

如果對 CommonFunction-Fun1 有任何更改。 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 制作共享 acorss budles 的通用/單獨文件/模塊？

Answer 1

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

通過創建一個單獨的塊 webpack 創建了單獨的 JS 文件，現在我可以單獨加載公共文件。