抽离公共代码
module.exports里配置属性对象
optimization:{ //执行是自上而下的
splitChunks:{ //分割代码块
cacheGroups:{ //缓存组
// 抽离自定义模块
common:{ //抽离出来代码自动创建在名为common开头的文件中
chunks: 'initial', //从入口开始提取代码
minSize:0, //共用字节大于0即抽离
minChunks:2 //引用2次就打包
},
// 抽离第三方库
vendor:{
priority:1, // 抽离的优先级，默认为0
test: /node_modules/,
chunks: 'initial', //从入口开始提取代码
minSize:0, //共用字节大于0即抽离
minChunks:2 //引用2次就打包
}
}
}
}
模块热更新
全局更新
可以使用module.exports里watch``watchOptions属性进行配置
// 保存后自动打包
watch: true,
watchOptions: {
poll: 1000, // 每1s询问是否更新
aggregateTimeout: 500, //防抖，输入过程后500ms后进行打包
ignored: '/node_modules'
},
局部更新
module.exports里配置属性对象
devServer: {
//指定被访问html页面所在目录的,即http://localhost:8080/home.html可以访问到。。
contentBase: path.resolve(__dirname, 'dist'),
// 热更新
hot: true
}
引用webpack内置插件
// 打印更新的模块路径
new webpack.NamedModulesPlugin(/\.\/locale/,/moment/),
// 热更新插件
new webpack.HotModuleReplacementPlugin(),
这么用以后，发现一个很奇怪的问题，抽离公共模块和热更新同时使用，打包不报错，运行devServe不报错，但是js文件不执行了？？为什么呢？
