4.0的webpack要比之前的版本强大的不是一点点
打包的时候也做了很多优化
然后说一些这段时间发现的有趣的技巧
1. 打包出来的文件很大，不知道是什么原因可以用 webpack-bundle-analyzer
很牛逼的分析工具，能知道打包出来的文件的都来自于属什么地方，每个有多大
使用方法很简单
1. 引入
2. 放到插件里
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
config.plugins.push(new BundleAnalyzerPlugin())
然后打包之后就会在浏览器弹出页面
比如我这个就是在告诉我highlightjs太大了，700多kb这种解决方案，一般是想办法抽离一部分highlight
这个玩意很炫酷，也很方便，强烈推荐
2. 公共模块分离
optimization: { ???????splitChunks: { ???????????cacheGroups: { ???????????????commons: { ???????????????????chunks: ‘initial‘, ???????????????????minChunks: 2, ???????????????????maxInitialRequests: 5, ???????????????????minSize: 0 ???????????????}, ???????????????vendor: { // 将第三方模块提取出来 ???????????????????test: /node_modules/, ???????????????????chunks: ‘initial‘, ???????????????????name: ‘vendor‘, ???????????????????priority: 10, // 优先 ???????????????????enforce: true ???????????????} ???????????} ???????} ???}webpack4.0的拆分变得人性化多了，可以很方便的把node_modules里的公共功能抽离出来，抽离出来不会有错的，客户端缓存起来，这部分是不会变动的
3. 压缩代码 compression-webpack-plugin
使用mode=production本身是会压缩的，但是这个压缩只是代码压缩，而浏览器其实是支持gzip和其他各种格式的压缩文件的，我们完全可以给浏览器一个压缩包的
使用这个插件压缩成gzip会使得代码体积再减小一两倍之多。用法也很简单
const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)
config.plugins.push( ???new CompressionWebpackPlugin({ ???????asset: ‘[path].gz[query]‘, ???????algorithm: ‘gzip‘, ???????test: new RegExp(‘\\.(js|css)$‘), ???????threshold: 10240, ???????minRatio: 0.8 ???}))当然这个玩意前提是要有个服务器支持的哦
一般的做法是我们请求某个js资源的时候，配置返回为压缩好的压缩包而不是js
就介绍这三个啦，如果你的webpack里还没有用过这三种优化，那就赶快试试吧。。
webpack4.0打包的时候一些技巧
原文地址：https://www.cnblogs.com/sowhite/p/9255261.html