The SplitChunksPlugin configuration of webpack4 does not take effect.

Vue,App,router, is introduced into both entry files, but the package is not extracted. Is there anything wrong with the configuration? See Code

< H2 > three.js < / H2 >
import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
    el: "-sharpapp",
    router,
    components: { App },
    template: "<App/>"
})
< H2 > main.js < / H2 >
import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
    el: "-sharpapp",
    router,
    components: { App },
    template: "<App/>"
})
< H2 > webpack.config.js < / H2 >
"use strict"
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const webpack = require("webpack")
const ZopfliPlugin = require("zopfli-webpack-plugin")
const utils = require("./build/utils")
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = {
    context: path.resolve(__dirname, "./"),
    devtool: "inline-source-map",
    mode: "development",
    resolve: {
        extensions: [".js", ".vue"],
        alias: {
            "@": path.resolve(__dirname, "src"),
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    entry: {
        test: "./src/main.js",
        three: "./src/three.js"},
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "eslint-loader",
                enforce: "pre",
                include: path.resolve(__dirname, "src"),
                options: {
                    formatter: require("eslint-friendly-formatter")
                },
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10,
                    name: utils.assetsPath("img/[name].[hash:7].[ext]")
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            },
            {                       
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }   
            },
            {
                test: /\.css$/,
                use: [
                    "vue-style-loader",
                    {
                        loader: "css-loader",
                        options: { importLoaders: 1 }
                    },
                    "postcss-loader"
                ]
            },
            {  
                test: /\.(htm|html)$/i,  
                use:[ "html-withimg-loader"]   
            } 
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: "index.html",  
            inject: true,  
            template: "index.html",  
            chunks: ["test"],  
            inlineSource: ".(js|css)$" 
        }),
        new HtmlWebpackPlugin({
            inject: true,  
            filename: "three.html",  
            template: "three.html",  
            chunks: ["three"],  
            inlineSource: ".(js|css)$" 
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.SplitChunksPlugin({
            chunks: "all",
            name: true
        })
        // new BundleAnalyzerPlugin()
    ]
}
Mar.18,2021

webpack4 has made a lot of changes to chunksPlugin. You can try using

like this.
{
    entry: {},
    output: {},
    module: [],
    plugins: [],
    optimization = {
        splitChunks: {
          chunks: "all", 
          minSize: 0,   
          name: 'common',      
          minChunks: 1,             
        }
    }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e50b12-4404b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e50b12-4404b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?