标签：plugin 核心 loader 概念 webpack 打包

一、webpack核心概念组成

入口（Entry）

出口（Output）

加载器（Loader）

插件（Plugins）

模式（Mode）

模块（Module）

依赖图（Dependency Graph）

二、webpack核心概念—入口

打包时，第一个被访问的源码文件

默认是src/index.js（可以通过配置文件指定）

webpack通过入口，加载整个项目的依赖

  

三、webpack核心概念—出口

打包后，输出的文件名称

默认是dist/main.js（可以通过配置文件指定）

 

四、webpack核心概念—loader

专门用来处理一类文件（非JS）的工具

webpack默认只能识别JS，想要处理其他类型的文件，需要对应的loader

命名方式：xxx-loader（css-loader | html-loader | file-loader）

以 -loader 为后缀

常用加载器：https://www.webpackjs.com/loaders/

五、webpack核心概念—plugin

实现loader之外的其他功能，plugin是webpack的支柱，用来实现丰富的功能。

命名方式：xx-webpack-plugin（html-webpack-plugin），以-webpack-plugin为后缀

常用插件：https://www.webpackjs.com/plugins/

注：Loader和Plugin本质上都是npm包。

六、webpack核心概念—模式

用来区分环境的关键字，不同环境的打包逻辑不同，因此需要区分。

三种模式：development（自动优化打包速度，添加一些调试过程中的辅助）

production（自动优化打包结果）

none（运行最原始的打包，不做任何额外处理）

七、webpack核心概念—模块

webpack中，模块的概念比较宽泛（一切皆为模块）

JS模块、一段CSS、一张图片、一个字体文件、······

详情：https://www.webpackjs.com/concepts/modules/

八、webpack核心概念—依赖图

标签：plugin,核心,loader,概念,webpack,打包
来源： https://blog.csdn.net/qq_36213140/article/details/122640360

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。