webpack之分離公共包

webpack之分離公共包

1. 安裝html-webpack-externals-plugin

2. 引入並使用插件

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

3. 利用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
           }
         }
       }
     }
   

4. SplitChunksPlugin文檔地址，點擊打開