jquery - Webpack 单独跨包共享文件

Question

使用 webpack 5.26

我有跨包使用的通用文件 js

常用功能

• 乐趣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 文件，现在我可以单独加载公共文件。