webpack 简介

Posted 2021-09-04 知否

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