webpack打包之框架代码与业务代码拆分

why框架代码与业务代码要拆分
单独打包类库文件原因：框架代码稳定性比较高，而业务代码更新迭代快，希望浏览器尽可能长的时间对框架代码进行缓存来减少服务器流量，让用户加载速度更快。
方法
在entry中设置框架代码放置的文件

config.entry = {
            app: path.join(__dirname, 'src/index.js'),
            vendor: ['vue'] //这个entry会单独打包
        },
config.optimization = {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        name: "vendor",
                        chunks: "initial",
                        minChunks: 2
                    }
                }
            }
        }

以上至针对webpack4.0.0中的设置，在webpack4.0.0中将插件webpack.optimize.CommonsChunkPlugin({name:’某个名字’})的使用方法改变了，这点要注意；改成了上述。
若在4中使用老方法，会报错：Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
进行分离之后，可以看到打包出的文件有多变化：


可以看到，分离前后，原先的出口mian.js被拆分成了两个vendor.js和app.js。app.js中存放的才是我们的业务代码，比较起来小多了。我们还可以加上hash码，优化浏览器的缓存效果。