webpack 简介

2021/6/29 23:50:44

本文主要是介绍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 。



这篇关于webpack 简介的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程