隔离通用模块

Question

我有两个页面page1.html和page2.html。它们每个都使用自己的脚本文件page1.js和page2.js。我借助这样的配置在webpack的帮助下收集它们

module.exports = {
    mode: "development",
    entry: {
        page1: "./src/page1.js",
        page2: "./src/page2.js"
    },
    output: {
        path: './dist',
        filename: '[name]-bundle.js'
    }
}

一切正常。输出是两个文件page1-bundle.js和page2-bundle.js，它们通过<script>

连接到页面。

现在，我希望使用page1.js和page2.js（例如jQuery）的共享库在一个common.js文件中脱颖而出。这样客户端就不会从两个页面下载相同的代码，而是使用浏览器缓存。有什么办法吗？

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

这会再创建两个文件vendors~[name]-bundle.js，客户端仍然必须下载所有文件

对我而言，唯一发生的事情是创建common.js本身，从pageX.js中移走所有常见的导入（并从文件本身中删除导入），并将第三个入口点添加到配置中。

这是怎么做的？有没有更文明的方式？