webpack 简介

本教程咱们来学一下 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 。