1. 启动命令、webpack5 持久化缓存、资源模块、moduleIds & chunkIds 优化、更智能的tree shaking优化、nodejs的polyfill脚本移除、模块联邦 2.npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader --save-dev webpack webpack-cli webpack-dev-server // 开发服务器包 html-webpack-plugin // 生成html插件 babel-loader // babel核心包 @babel/core //babel核心文件 @babel/preset-env // es语法编译 es6==>es5 @babel/preset-react // 编辑react语法 style-loader css-loader
   npm install react react-dom --save

1.webpack5持久化缓存 cache： memory(硬盘缓存) filesystem(内存缓存) 2.资源模块 通过配置自带了 raw-loader url-loader file-loader 不在需要引入对应的loader即可 3.chunkids moduleIds 优化： 以前模块打包设置optimization的 chunkIds 设置为natural 所有引入文件即为自然数.js,当删除其中一个后，当前删除后面的所有数据都会重新打包，优化有 设置deterministic 后为文件一对一映射生成就不会解决当前问题 4.移除nodejs的polyfill: webpack4 带了许多node.js核心模块polyfill，一旦模块中使用了任何核心模块（如crypto）这些模块就会自动启用，webpack5 不再自动引入这些polyfill 5.tree shaking:在打包的时候去掉代码中一些没用的代码