第三方包处理

第三方包处理

const vue = require('vue')
{
  entry: {
   // bundle是我们要打包的项目文件的导出名字， app是入口js文件
   bundle: 'app',
   // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
   vendor: ['vue'],
   jquery: ['jquery'],
  },
 output: {
     path: __dirname + '/bulid/',
	 // 文件名称
	filename: '[name].js'
 },
  plugins: {
    // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
    // 打包之后就生成vendor.js文件
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
    new webpack.optimize.CommonsChunkPlugin('jquery',  'jquery.js')
  }
}

补充

补充：原笔记的写法是 webpack 3/4 时代的 CommonsChunkPlugin，webpack 4+ 已废弃。现代写法用 optimization.splitChunks + 持久缓存：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial'
        }
      }
    }
  }
};

进一步：webpack 5 配合 cache: { type: 'filesystem' } 启用持久磁盘缓存，二次构建可提速 50% 以上。

来源整理自：我的有道云笔记