webpack之分离公共包

最新推荐文章于 2024-07-31 08:57:12 发布

仇益阳

最新推荐文章于 2024-07-31 08:57:12 发布

阅读量1.7k

点赞数

分类专栏： webpack学习

本文链接：https://blog.csdn.net/m0_37938910/article/details/91805105

版权

webpack学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

webpack之分离公共包

安装html-webpack-externals-plugin

引入并使用插件

		const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
        // new HtmlWebpackExternalsPlugin({
        //     externals: [{
        //         module: 'vue',
        //         entry: 'https://unpkg.com/vue@2.6.10/dist/vue.js',
        //         global: 'Vue'
        //     }]
        // })

利用webpack4自带SplitChunksPlugin

optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }