webpack基础学习

作用

1. 就是一个静态模块打包工具，专门用来打包静态模块的

概念

1. 入口（entry）：入口起点，即构建的起始文件
2. 输出(output): 构建输出的文件名和路径
3. loader ： webpack本身只能处理JavaScript和JSON文件，其他类型的文件交给loader来转换
4. 插件（plugin）：执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
5. 模式(mode): 通过选择 development, production 或 none 之中的一个，来设置 mode 参数
6. 浏览器兼容性:不支持 IE8 及以下版本
7. 环境 : Webpack 5 运行于 Node.js v10.13.0+ 的版本。

---

补充

1. 模块： 在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为 模块。
   webpack 模块： webpack支持多种模块类型。（ECMAScript 模块、CommonJS 模块、AMD 模块、Assets、WebAssembly 模块）
2. Tree Shaking

   • 作用：webpack 打包时，使用Tree Shaking 剔除不用的依赖代码
   • 原理：依赖 ES6 的静态导入导出
   • 缺点：动态导入不能剔除代码、在导入时执行一些其他操作，如修改全局变量、注册事件监听器、打印等也不会剔除代码。

报错

1.运行npx webpack 报没有设置mode参数

处理方式：添加配置

参考资料#

入门