简单总结webpack5

webpack的功能

1. 将chunk打包成bundle (代码块打包)
2. 识别部分es6语法 (只识别es module)
3. 只能识别js和json格式文件 (识别其他需要loader)
   use使用时要按照顺序 (倒序)
       css-lodaer 
       eslint-loader 
       ts-loader 
       babel-loader (AST抽象语法树)
       ...
    
4. 使用插件丰富功能 (plugin)

优化的方式

1. source-map
2. 3种缓存hash hash、chunk hash、content hash
3. b文件的content hash改变 影响a文件 (runtimeChunk)
4. tree sheking
5. code split (多入口) (optimization 30kb> 引用2次) (import())
6. lazy pre (import)
7. pwa (workbox 持久缓存)
8. 多进程打包 (启动需要300ms 通信消耗)
9 .externals (不打包 外链)
10.dll (不打包 单独打包)

webpack5新增

1. 增强tree shaking 解决之前模块嵌套引用无法shaking的问题
2. 使用更好的算法和默认值来改善长期缓存
3. 通过持久缓存提高构建性能
4. 默认entry output配置
5. 图片资源使用配置 asset/resource
6. content hash 由之前的结构性内容改为真实内容
7. 不愿意兼容ie，webpack打包生成一个自调用匿名箭头函数。
   ie不支持，也没有走babel，需要设施allowArrayFunction选项
8. webpack-dev-server 启动命令改为webpack serve
9. minSize 改为对象 可分别配置js style
10.optimization.minimizer 中可以使用...