Question

我的项目有一个特定的用例，我不确定如何使用Webpack 4进行配置。

在我的应用程序中，页面是由服务器在运行时基于configuratin组成的。结果，直到服务器实际收到请求并选择它们之后，我才知道需要哪些捆绑软件。

本质上，构成我的应用程序的模块有两种：

库模块：这些是我的应用程序的一些实用程序模块。创建的所有页面都需要这些。例如。 Ajax发送者，排序和搜索等。
通用模块：这些是服务器根据页面配置选择的模块。例如。聊天功能，广告弹出窗口，数据表等。

请注意，我是这两种模块的维护者，因此我对如何构造它们具有完全的灵活性。 供应商模块由第三方（例如jQuery）维护。

通用模块依赖于库模块，但不依赖于verca。通用模块彼此之间没有依赖关系。

应用程序的文件夹结构：

app-root/
    - libs/*.js
    - generics/*.js

我的应用程序请求流如下所示： 1.服务器收到对特定页面配置的请求。它确定需要通用模块X，Y，Z来满足此配置。 2.服务器创建<script>标签以一次服务所有库模块（my-libs.bundle.js）。 3.服务器为每个通用模块（<script>，A.bundle.js等）创建一个单独的B.bundle.js标签。

如何设置Webpack以这种方式生成捆绑包？

使用Webpack 4的当前进度：

入口点：所有模块都是入口点。
```
entry: ['libs/*.js', 'generics/*.js']
```

缓存组：

optimization: {
    splitChunks: {
        cacheGroups: [
            {
                test: /libs\/*.js/,
                chunks: "normal",
                name: "libs",
                enforce: true
            },
            {
                test: /generics\/A.js/,
                chunks: "normal",
                name: "A",
                enforce: true
            },
            {
                test: /generics\/B.js/,
                chunks: "normal",
                name: "B",
                enforce: true
            },
            {
                test: /generics\/C.js/,
                chunks: "normal",
                name: "C",
                enforce: true
            },
            ...etc
        ]
    }
}

Regex模式匹配可能并不完美，但是您会明白的。

输出：

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build/js')
},

面临的问题：

运行上面的设置时，我得到以下捆绑包： 1. main.bundle.js：包含Webpack运行时，模块列表（清单？）等。 2. libs.bundle.js 3. A.bundle.js 4. B.bundle.js 5. C.bundle.js 6. ...等

到目前为止，太好了。

现在，我让服务器以以下方式（伪代码）生成HTML页面：

<script src="build/js/main.bundle.js"></script>
<script src="build/js/libs.bundle.js"></script>

for (modulePath of requestedGenericModulePaths) {
    console.log(`<script src="${modulePath}"></script>`);
}

...

（忽略语法，CDN加载等...这只是一个示例）。

因此，如果请求的页面是通用模块X和Y，则将输出以下HTML：

<script src="build/js/main.bundle.js"></script>
<script src="build/js/libs.bundle.js"></script>

<script src="build/js/generics/X.bundle.js"></script>
<script src="build/js/generics/Y.bundle.js"></script>

...

到目前为止，太好了。

但是，这就是我所困的地方。上面的HTML不起作用；如果我将日志记录语句放在X和Y中，则它们不会显示在浏览器控制台上。

我调查了main.bundle.js。据我了解，main.bundle.js中似乎需要 ALL 通用模块。

我不确定如何继续。是否应在每个cacheGroup中设置chunks: "async"？我应该将所有通用模块外部化吗？我应该和清单一起玩吗？

使用Webpack 4的完全可配置的页面

使用Webpack 4的当前进度：

面临的问题：

0 个答案: