webpack是什么：前端模块打包工具

webpack是什么，它是一个基于Node.js运行的前端静态模块打包器，你可以把零散的js、css、图片、字体等前端资源当成模块，webpack会分析模块依赖关系，合并、编译、压缩后输出适配浏览器的静态文件，适合开发单页应用、多页面前端项目，不适合纯静态页面且资源极少、不想搭建Node环境的场景，使用前本地需要装好Node.js，版本建议16及以上。

webpack核心概念

entry是入口，webpack从这个文件开始递归查找所有依赖模块，单入口项目只写一个文件路径，多入口项目可以配置多个键值对，分别生成独立打包产物。output控制输出，指定打包后文件存放的文件夹和文件名，常用[name]、[hash]占位符区分不同产物、添加文件哈希，方便浏览器缓存更新。

loader负责处理非js类型的模块，webpack原生只识别js和json文件，css、png、vue文件都要匹配对应loader，比如css-loader解析css代码，file-loader处理图片资源，loader执行顺序从右往左、从下往上，配置顺序出错会直接报解析失败。

plugin用于扩展打包能力，loader只处理单个模块，plugin作用于整个打包周期，你可以用它生成html文件、提取独立css文件、清理旧打包文件，它会在打包的钩子时机执行自定义逻辑，覆盖构建前后、编译完成等阶段。

mode是打包模式，分为development、production、none三种。

webpack基础使用流程

初始化项目文件夹，执行npminit-y生成package.json，再执行npminstallwebpackwebpack-cli--save-dev安装核心包，webpack-cli提供命令行调用能力，没有它无法直接在终端运行webpack命令。新建src目录，在里面写入口js文件，编写简单的模块导入代码，测试依赖引用逻辑。

根目录新建webpack.config.js配置文件，写入entry、output字段，需要处理css就增加module.rules配置对应loader，需要自动生成html就引入html-webpack-plugin插件。在package.json的scripts里新增build脚本，值设为webpack，之后运行npmrunbuild就触发打包，产物默认输出到dist文件夹。

开本地热更新服务，安装webpack-dev-server，新增dev脚本，devServer配置里设置open:true，运行npmrundev后自动打开浏览器，修改源码会实时刷新页面，不用反复手动打包刷新。

tree-shaking有前提。

模块必须使用ES6importexport语法，commonjs的require语法无法触发tree-shaking，未被引入的代码才会在production模式下被剔除。

webpack5相比webpack4改动较多，移除了很多内置loader，同时内置持久化缓存，二次打包速度提升明显，升级版本时要逐个核对原有loader、插件的兼容版本，直接升级容易出现打包中断。