如何避免JS文件中捆绑三个以上的webpack答案

【问题标题】：How to avoid more than three webpack bundled in JS files如何避免JS文件中捆绑三个以上的webpack
【发布时间】：2021-05-16 19:49:55
【问题描述】：

我正在使用带有 webpack 的 Vue 框架，在我的项目中我有超过 10 个node_modules，比如lodash、vuex,vue-router 等等。

我的问题是在我构建项目后它显示了 13 个 JS 文件，但这里我想限制为只有两个或三个文件。

在我的/dist 文件夹中

package.json

  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "serve": "webpack-dev-server --mode development",
    "build": "npm run clean && webpack --mode production"
  },

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const path = require("path")
module.exports = {
    // entry: './src/build.js',

   
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        library: "$",
        libraryTarget: "umd",
      },
      
    module: {
        rules: [{
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.(sass|scss|css)$/,
                use: ['vue-style-loader', 'css-loader','sass-loader'],
              
            },
           
        ]
    },
    devServer: {
        open: true,
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
   


}

如何避免我的dist 文件夹中的文件超过 3 个？
如何重命名dist 文件夹中的这三个文件？例如1.main、2.main、...

【问题讨论】：

标签： webpack babeljs

【解决方案1】：

最大块

plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1, // disable creating additional chunks
    })
],

【讨论】：