Question

我有一个使用各种模块的应用程序，我也想拥有延迟加载插件系统。我试图将所有常见的模块打包到index.js文件（基本上是运行的应用程序）和插件相关的模块，即home.js，admin.js，我计划稍后加载（使用XmlHttpRequest）（需要时）通过申请。我想避免将vendor.js文件和通过应用程序通用的所有内容打包到index.js，所有与home.js相关的内容以及与admin到admin.js相关的所有内容所以最后我想只有3个文件：

index.js (application bootstrapper, plugin loader i.e. router, common application & vendor modules)
home.js (loadable pack where only modules (including vendor) related to home are located)
admin.js (loadable pack where only modules (including vendor) related to admin are located)

和index.html我只想加载index.js文件

...
<head>
   ...
   <script src="/js/index.js"></script>
   ...
</head>
...

我试图了解如何使用块分组webpack代码，但不幸的是，我无法让它工作。目前我有：

webpack.config.js

  const path = require("path");

  module.exports = {
     mode: "development",
     entry: {
        index: "./src/index.js",
        home: "./src/home.js",
        admin: "./src/admin.js"
     },
     output: {
        path: path.resolvve(__dirname, "js"),
        publicPath: "/js/",
        filename: "[name].js"
     },
     optimization: {
        runtimeChunk: false,
        splitChunks: {
           cacheGroups: {
              index: {
                 chunks: "all",
                 name: "index",
                 test: "index",
                 enforce: true
              }
           }
        }
     }
  }

这似乎正确生成了可预期内容和大小的预期文件但是当我将index.js加载到浏览器时它不解析/执行“零”模块（目前只有alert（“hello”））但它没有出现）。我尝试将all更改为initial，但似乎它根本不会影响输出。

由于

修改

我发现index.js文件中没有webpack运行时，这就是为什么它不执行...另一方面，它在home.js.我想反对。

Webpack 4＆amp;没有供应商包的代码拆分

0 个答案: