Webpack 分别跨包共享文件

Question

使用 webpack 5.26

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

常用函数

乐趣1
乐趣2

好友 1

CommonFunction - Fun1

捆绑包 2

CommonFunction - 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 制作共享跨包的公共/单独文件/模块？

Answer 1

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

通过创建一个单独的块，webpack 创建了单独的 JS 文件，现在我可以单独加载普通文件了。

Webpack 分别跨包共享文件

Webpack share file across bundles separately

jquery

typescript

webpack

webpack-5