共计 1298 个字符，预计需要花费 4 分钟才能阅读完成。
本教程咱们来学一下 webpack 的根底入门常识，webpack 作为一个 JavaScript 应用程序的动态模块打包器，能够将各种动态资源作为模块来解决，是当下前端工程化的一个很受欢迎的工具，咱们将在 webpack4.0 的根底上来学习 webpack 的应用。
什么是 webpack
webpack 是一个开源的前端打包工具，webpack 提供了前端开发不足的模块化开发方式，将各种动态资源视为模块，并从它生成优化过的代码，例如动态资源能够包含 js、css、html、less、图片等等。
webpack 能够从终端或者是通过更改 webpack.config.js 文件来设置各项性能。咱们要应用 webpack，有一个前提条件就是必须先装置 Node.js，在装置 webpack 或者其余的插件等都须要用到 npm 命令。
webpack 其中一个个性是应用加载器来将资源转化成模块，开发者能够自定义加载器的程序、格局来适应我的项目的需要。
为什么应用 webpack
咱们在开发的时候，常常会遇到在一个 HTML 页面中引入多个 CSS 和 JS 文件，或者是一些 JS 资源彼此之间存在依赖关系，或者是须要应用一大堆安装包的状况，这些问题可能容易导致页面加载迟缓。所以为了解决这个问题，咱们能够应用 webpack 来打包这些文件，将各种动态资源都打包成了一个文件，这样浏览器加载起来就快很多。
在 webpack 中，任何动态资源都能够视为模块，模块之间也能够相互依赖，通过 webpack 对模块进行解决后，能够打包成咱们想要的动态资源。
webpack 四个外围概念
webpack 中有四个外围概念，包含入口 (entry)、输入 (output)、loader、插件 (plugins)。如下所示：
- entry：用于指定 webpack 应该应用哪个模块来作为构建的开始，能够指定一个或多个终点，默认值为 ./src。
- output：指定 webpack 最终输入的文件输入地位和文件名等信息，默认输入地位为 ./dist。
- loader：能够将所有类型的文件转换为 webpack 可能解决的无效模块，而后咱们就能够利用 webpack 的打包能力，对它们进行解决。
- plugins：目标在于解决 loader 无奈实现的其余事。能够让 webpack 可能执行更多任务，从优化和压缩，到从新定义环境中的变量，性能十分弱小。
webpack 劣势
- webpack 是以 commonJS 的模式来书写脚本的，但对 AMD/CMD 的反对也很全面，不便旧我的项目进行代码迁徙。
- 能够通过配置，打包成多个文件，无效利用浏览器的缓存性能晋升性能。
- 将款式文件和图片等动态资源也可视为模块进行打包。配合 loader 加载器，能够反对 Sass，Less 等 CSS 预处理器。
- 专一于解决模块化的我的项目，能做到开箱即用、一步到位。
- 扩展性强，插件 plugins 机制欠缺。
总结
webpack 是一个模块打包工具，或者也能够叫做模块化打包机。通过 webpack 能够帮忙咱们将不同的资源和文件，进行打包，也就是合并在一个文件外面。除此之外，webpack 还能够进行 CSS 预处理，将 ES6 转为 ES5 等作用。下一节咱们将会学习如何装置 webpack。