认识
webpack是优秀的前端构建工具，静态资源打包器，可以根据模块依赖关系进行静态资源分析，快速打包生成相对应浏览器可以直接识别的静态资源！
环境
1）node环境
2）vs code编辑器
规约
1）入口文件：
开始打包第一个文件称为入口文件，通常经过在入口文件中引入其他资源，形成资源关系树状图。webpack根据依赖关系进行一次处理。
2）chunk代码块：
管理webpack内部的打包进程，chunk可以分为“入口”和“子代码块”，入口文件就是一个chunk，默认的webpack打包配置是一个入口文件是一个chunk，打包生成一个bundle。但是如果出现代码分割的情况下，有多个chunk打包生成一个bundle。
3）bundle：
通过处理入口文件中的关系依赖，最后打包输出成为浏览器可以直接识别的静态资源文件就是bundle。
安装webpack环境
1）项目根目录控制台执行指令：npm init，生成package.json文件，npm是新版本node自带的包管理工具，而package.json相当于清单，记录依赖库和项目信息的文件。
2）全局安装webpack指令： npm i webpack webpack-cli -g ，全局安装是指系统环境中，任何项目文件夹下都可以使用指令，其中mac电脑首次执行应该是需要管理员权限，sudo npm i webpack webpack-cli -g 如果网速太慢则建议切换为淘宝镜像源。
3）本地安装webpcak指令： sudo npm i webpack webpack-cli -D，下载的模块是注入于本项目下的./node_nodules文件夹中，不会影响其他项目，起到独立的作用！
概念核心：
Entry
入口文件指示，配置wepack以哪个入口文件进行打包分析等参数。
Output
出口文件指示，配置webpack打包后的资源bundle输出资源的路径及参数。
Loader
webpack本身仅能识别js、json代码，而Loader的作用就是将CSS、img、字体资源翻译成为webpack可以识别的资源，可以识别后才可以进行打包处理！loader通过npm安装依赖之后就可以配置，不用需要引入。
1）Es语法检查配置：
2）处理CSS文件并兼容：
3）处理Less文件：
4）处理图片文件：
5）处理html文件引入的图片：
6）处理字体图标：
7）处理JS文件并兼容：
Plugins
插件（plugins）可以让webpack执行范围更广更为复杂的任务，配置打包优化等一下相关的作用功能，使用前需要单独引入对应的插件。
1）处理html文件插件：
2）抽离CSS成单独文件插件：
3）压缩CSS插件：
4）PWA离线访问技术插件：
5）忽略库并动态引入第三方库插件：
/** * dll动态引入单独库 * 通过manifest.json文件中的映射关系，构建打包时进行忽略打包哪些库，再通过addAssetHtmlWebpackPlugin引入独立打包的库。 */new
来源：花森酱
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！