webpack介绍(工具)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

webpack拥有很高的可配置性，可以很好的满足你的不同打包环境的配置需求。

接下来介绍下webpack的几个关键概念：

---

入口（entry）

输出（output）

loader

插件（plugin）

模式（mode）

浏览器兼容性（browser compatibility）

---

入口[Entry]：

    入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图（dependency graph）的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

输出[output]：

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

模式[mode]:

提供 mode 配置选项，告知 webpack 使用相应环境的内置优化，可以根据不同的需要配置不同的环境下的打包行为。

[加载]loader：

loader用于对模块的源代码进行转换。loader可以使你在 import 或加载模块时预处理文件。因此，loader类似于其他构建工具中“任务（task）”，并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript或将内联图像转换为data RURL。几乎可以在java模块中导入大多数文件。

插件[plugin]:

插件是webpac的支柱功能。webpack本身也可以看作是一个插件，添加其他插件目的是为了解决loader无法实现的其他事情。

以上内容整体会在一个webpack.config.js的文件中，举个例子：

如果想要看更详尽的webpack打包相关的知识，可以去webpack中文网：

https://webpack.docschina.org/concepts/plugins/