首先，学习一个技术之前我们要先了解它是什么，我们能用它来做什么，我们是否真的需要使用它，之后才是一步一步的去了解、学习并使用它。
webpack 简单来说它就是一个打包工具。在本质上它是一个现代 JavaScript 应用程序静态模块打包器(module bundler)，当 webpack 打包应用程序时，他会递归的构建一个依赖关系图。其中包含应用程序所需要的每个模块，然后将这些模块打包成一个或多个bundle。
对与每个前端开发技术人员来说 webpack 几乎是不可避免的一项技术，无论在工作中是否有使用到 webpack 都要对它或多或少的有些了解。要了解、学习 webpack 之前，要先了解以下这些重要概念：
注意：在了解这些概念之前要先了解 webpack.config.js 文件，在项目中安装了 webpack 之后，需要配置一个 webpack.config.js 文件，用来告诉webpack 该怎么去打包。而接下来的几个重要概念也都需要在 webpack.config.js 文件中进行配置。
入口(entry)
webpack 入口起点 ( entry point ) ，其实就是在 webpack.config.js 文件中配置一个 entry 属性，用来告诉 webpack 一个或多个入口起点，默认值是 ./src
入口起点告诉 webpack 应该使用那些模块来构建内部依赖图的开始，进入入口文件(如上图 file.js)文件后，webpack 会找出那些模块和库是入口文件直接或间接依赖的，每个依赖随即被处理最后输出到我们称之为 bundles 的文件中。
注意：根据应用的需求，可以有多种方式配置 entry 属性。
出口(output)
webpack 出口 ( output )， 其实就是在 webpack.config.js 文件中配置一个 output 属性，用来告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值是 ./dist
注意：根据应用的需求，可以配置 output 更多属性。
加载器(loader)
在了解 webpack 加载器 ( loader ) 之前，应该先知道 webpack 只能理解 JavaScript 文件，但在我们项目中不止只有 JavaScript 文件还可能有其他类型的文件，例如：.jsx 等，而 webpack 加载器 ( loader ) 的作用就是可以去处理非 JavaScript 文件，在打包之前将之转化为 webpack 可以理解的 JavaScript 文件。
注意：根据应用的需求，可以配置更多的 loader 配置属性。
插件(plugins)
我们已经知道 加载器 ( loader ) 可以用来转换某些类型的模块。而插件 ( plugins ) 可以用来执行更为广泛的任务。插件 ( plugins ) 的范围包括 从打包优化，压缩，一直到重新定义环境中的变量。总之插件的作用十分强大，可以用它来处理各种各样的任务。
使用一个插件也非常简单，只需要 require() 引入它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
注意：webpack 提供许多开箱可用的插件！查阅我们的插件列表获取更多信息。
模式(mode)
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
网友评论