webpack4的SplitChunksPlugin配置不生效

Question

两个入口文件都引入了Vue，App，router，但打包没提取,配置有什么问题吗？见代码

three.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

webpack.config.js

'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()
    ]
}

Answer 1

webpack4对于chunksPlugin的改动不小，可以试试这么用

{
    entry: {},
    output: {},
    module: [],
    plugins: [],
    optimization = {
        splitChunks: {
          chunks: "all", 
          minSize: 0,   
          name: 'common',      
          minChunks: 1,             
        }
    }
}