webpack5学习

webpack 使用过程中的优化处理总结， 在前面的章节中分析了开发环境和生产环境的一些优化配置，这里将这些配置总结如下。具体可以参照前面总结过的查看 开发环境 .优化代码打包构建速度 HMR sty

webpack5 --- 将特定的代码单独打包 在之前说过可以将公共代码分离打包出来， 但是如果功能代码比较多的时候，都打包都一块会导致单个代码比较大，那么如果将已知的公共文件以CDN的方式引入，那就

多进程打包 在打包过程中，为了提高打包速度，在代码量大的时候可以开启多进程打包。 在启用多进程打包之前，首先了解到，多进程打包的启动时间大概是600 ms 另外，进程通信上也会有一定的开销。所以应用多

代码分割的几种情况 将node_modules中代码单独打包一个chunk 自动分析多入口chunk 中，有没有公共的文件，如果有会打包成单独一个chunk 通过js 代码，让某个文件被单独打包成一个

性能优化分为开发环境和生产环境 开发环境 提高环境打包速度 优化代码调试 生产环境 提高打包速度 优化代码运行的性能 模块热替换 HMR 作用：一个模块发生变化，智慧重新打包这一个模块，这样提高构建速

团队开发中，统一代码风格是很有必要的。不仅有利于代码的统一，也让其他人看着舒服。在这里介绍下webpack 中使用 eslint 首先介绍下我使用的loader和插件 首先在webpack.confi

在写js 的时候，使用了es6 等最新的语法，那么在低版本的浏览器中是不能直接运行的，需要去做兼容性处理。 首先 下载需要的插件 yarn add -D @babel/core @babel/pres

将css 压缩的作用不用多少，webpack5 中 压缩css 使用 optimize-css-assets-webpack-plugin 插件。 使用也是非常容易

在实际项目中css需要兼容不同的浏览器，那么就需要使用插件将写好的css代码，做兼容性处理。这里我介绍下在 webpack5 中处理兼容性 此时webpack提供了postcss-loader和对应插

将css 单独打包将用到 mini-css-extract-plugin 插件 npm install --save-dev mini-css-extract-plugin 使用该插件 使用这个插件，

webpack5 的文档笔记 起步 安装需要的webpack 新建配置文件 webpack.config.js 添加内容 资源管理配置 加载css 首先下载需要的loader yarn add sty

webpack 的基础配置中要掌握五个核心概念 entry: 指定从哪里打包 output: 指定输出以及如何命名 loader: 处理非js 文件 plugins: 功能处理 mode: 开发环境还