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

Question

我正在使用带有 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 文件夹中的这 3 个文件？例如 1.main、2.main、...

Answer 1

最大块

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

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

How to avoid more than three webpack bundled in JS files

webpack

babeljs