如何在 webpack 中使用 vuejs 禁用将块拆分为不同的文件？

Posted 2023-02-22

【中文标题】如何在 webpack 中使用 vuejs 禁用将块拆分为不同的文件？

【英文标题】：How to disable splitting of chunks into different file with vuejs in webpack?

【发布时间】：2020-09-19 02:26:15

【问题描述】：

我的项目有 laravel-vue 堆栈。在使用mix 构建时，它会将代码拆分为两个主要文件

vendor.js
app.js

除此之外，还有大约 60 个文件被创建为像

这样的块

0.js
1.js
2.js
...

61.js

如何告诉 webpack 将这些块绑定到单个文件中。 webpack 是否会为 cue 中的每个新组件拆分成块？

【问题讨论】：

很高兴看到你的 webpack 配置

【参考方案1】：

你可以像这样在你的 webpack 配置文件中修改你想要多少块（例如来自vue.config.js 文件）：

module.exports = 
  configureWebpack: 
    optimization: 
      splitChunks: 
        minSize: 10000,
        maxSize: 250000,
      
    
  ,
;

我不知道你的文件大小，但如果你根据需要增加maxSize，你可以有一个文件。

【讨论】：

添加了 maxSize 但仍然得到相同的结果

它影响了供应商相关的块，但是那些1.js，2.js，3.js，他们仍然没有受到它的影响。

你也可以试试LimitChunkCount插件：webpack.js.org/plugins/limit-chunk-count-plugin