Webpack基本概念

Webpack概念

环境： node.js10版本以上；都是基于node的环境运行的

首先，Webpack是什么？

Webpack是一种前端资源构建工具，一个静态模块打包器(module bandler)
在webpack看来，前端的所有资源文件(js/json/css/img/less…)都会作为模块处理（在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块）都会打包成对应的静态资源(bundle)。

Webpack五个核心概念

1. Entry[从哪开始打包] ，
   入口（Entry）指示Webpack以哪个文件为起点开始打包，分析构建内部依赖图。
2. Output [从哪开始输出]
   输出(Output)指示Webpack打包后的资源bundles输出到哪里出，以及如何命名。
3. Loader[翻译官]
   帮助Webpack识别非js文件，包含优化压缩，定义环境变量…
   loader 用于对模块的源代码进行转换。loader 可以使你在 引入或"加载"模块时预处理文件。并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
   webpack只能处理js/json文件。但是一旦处理(css，img，less)文件，就处理不了，这时候就需要loader,Loader能够让Webpack去处理那些非JavaScript文件(Webpack自身只理解Javascript)，翻译成webpack能看懂的东西，这时候就可以打包啦。
   官方中文文档：https://www.webpackjs.com/concepts/loaders/
4. Plugins[插件]
   插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直重新定义环境的变量等。
5. 模式（自动启用插件）
   分为development开发模式和production生产模式