webpack基本介绍

Webpack是什么

Webpack是一种前端资源构建工具，是一个静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

解释：

Webpack会以入口文件为起点，将所有的依赖都记录好，形成一个依赖关系树状结构图。

接着把所有的依赖代码都引进来形成一个chunk（翻译过来就叫代码块），

再将这些代码都编译成浏览器能够识别的代码（例如将less文件编译成css，将js代码编译成浏览器能够识别的js语句等）。这个编译的过程就叫做打包。

最后，将打包好的资源输出出去，输出的资源叫bundle。

Webpack的五个核心概念

webpack五个核心概念分别为：Entry，output，loader，plugins，model

entry

入口（Entry）指示webpack以那个文件为入口起点开始打包，分析构建内部依赖图。

解释：entry是打包的入口文件，就是要告诉webpack要从哪开始打包

output

输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

解释：Output是打包的输出文件，就是告诉webpack要将打包好的资源放到哪里，叫什么名字

loader

Loader让webpack能够去处理那些非Javascript文件（webpack自身只理解Javascript）

解释：因为webpack只能识别js文件，对于css，less等文件，webpack不识别，所以需要将不识别的文件转换为webpack识别的文件。而loader就恰恰做了这项工作。loader就相当于一个翻译官，将less，css等webpack不识别的文件翻译成webpack识别的。

plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

解释：Plugins是插件。因为Loader只是翻译，但是还有很多任务webpack不能完成，例如压缩等等任务，这个时候就需要Plugins来帮忙处理。Plugins就相当于一个电脑的外放、外显等装置，也可以理解为电脑安装的软件。

mode

模式（Mode）指示webpack使用相应模式的配置

Mode总共有两种模式，一个开发模式（development）一个生产模式（production）。Development的配置相对简单一些，production模式的配置相对复杂一些，因为生产模式会做一些优化的工作。