webpack4版本前,可以使用webpack内置的JS插件CommonsChunkPlugin来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大,从而导致加载时间过长.具体设置如下:

webpack.config.js

module.exports = {
    entry: {
        app: path.join(__dirname, './src/main.js'),
        vendors:['jquery'] //把要抽离的第三方包的名称,放到这个数组中
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
        plugins:[
            new webpack.optimize.CommonsChunkPlugin({
             name:’vendors’, // 指定要抽离的入口名称
             filename:’js/vendors.js’  //将来再发布的时候,除了会有一个bundle.js,还会多一个vendor.js文件,里面存放了所有的第三方包

            })
        ]

}        

更多具体设置,可查看:https://segmentfault.com/a/1190000012828879?utm_source=tag-newest

webpack4版本,已经不用webpack.optimize.CommonsChunkPlugin。如果引用,会报下面的错。

可以在optimization.splitChunks中设置

module.exports = {
    entry: {
        app: path.join(__dirname, './src/main.js'),
        vendors:['vue','vue-router'] //把要抽离的第三方包的名称,放到这个数组中
    },
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'js/bundle.js'
    },
        module:{},
        plugins:[],
        optimization: {
      minimizer: [new UglifyJsPlugin()],    
      splitChunks: {
        cacheGroups: {
          commons: {
            name: 'commons',//commons里面的name就是生成的共享模块bundle的名字
            chunks: 'all',
            minChunks: 2
          }
        }
      }
    }
}

具体配置,可以查看:https://webpack.js.org/plugins/split-chunks-plugin/