0

我将 webpack 从版本 2 升级到版本 4。我的配置包括：

entry = {
    Main: './main',
    App: './app'
};

和

var output = {
    path: path.join(__dirname, outPath, '_js'),
    publicPath: '/_js/',
    filename: '[name]-bundle.js'
};

在版本 2 中，我的输出是简单的App-bundle.jsand Main-bundle.js，但在 webpack@4 中，输出是

Entrypoints:
  Main (414 KiB)
      Main~493df0b3-bundle.js
      Main~4c0201b9-bundle.js
  App (316 KiB)
      App~47dad47d-bundle.js
      App~6bd0612f-bundle.js
      App~01e7b97c-bundle.js

没有要导入的中心、非散列文件名。

编辑：

我的optimization对象如下所示：

optimization: {
    splitChunks: {
        chunks: 'async',
        minSize: 20000,
        maxSize: env === 'production' ? 1000000 : 0,
        minChunks: 1,
        maxAsyncRequests: 6,
        maxInitialRequests: 4,
        automaticNameDelimiter: '~',
        cacheGroups: {
          default: {
            minChunks: 1,
            priority: -20,
            reuseExistingChunk: true
          }
        }
    },
    minimize: env === 'production' ? true : false
},

- - 问题 - -

我可以有块，但我如何配置 webpack 4 以便有一个简单调用的中央条目文件Main-bundle.js并且App-bundle.js我可以轻松地导入我的 HTML 模板？

4

1 回答 1

1

请在您的配置中删除minSize和。或者，降低 minSize 并提高 maxSize。maxSizesplitChunks

minSizemaxSize当您想要微调块以获得性能或其他考虑块大小的原因时，它非常方便。

我个人发现，对于 10 个作为“初始块”下载的块，拥有 600KB 大小的块是我的应用程序中最好的微调性能。没有它我无法达到相同的性能结果，因为 webpack 为我的一些入口点创建了一个不均匀的大块。

于 2020-08-06T20:02:26.440 回答