Question

使用 webpack 5.26

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

通用功能

乐趣1
Fun2

Budle1

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 分别跨包共享文件

1 个答案: