Webpack入门（六）

抽离公共代码/文件

// webpack.config.js
module.exports = {
  optimization: {
        splitChunks:{//分割代码块
            cacheGroups:{//缓存组
                common:{//公共模块抽离
                    chunks:'initial',//从刚开始抽离 （ 扩展：异步模块 ）
                    minSize:0,//最小抽离数
                    minChunks:2,//引用多少次才会抽离
                },
                vebdor:{//第三方模块抽离
                    priority:1,//权重，单独文件
                    test:/node_modules/,
                    chunks:'initial',//从刚开始抽离 （ 扩展：异步模块 ）
                    minSize:0,//最小抽离数
                    minChunks:2,//引用多少次才会抽离
                }
            }
        }
    }
}

懒加载

例：点击按钮加载资源

// src/index.js
 let button=document.createElement('button');
 button.addEventListener('click',function () {
 	//jsonp实现
    import('./js/entery').then(data=>{
       console.log(data)
    })
   })
   document.body.appendChild(button)

// src/js/entery.js
function title() { 
	console.log('test')
}
export default{
    title
}