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 简介的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01UniApp 中组件的生命周期是多少-icode9专业技术文章分享
- 2024-11-01如何使用Svg Sprite Icon简化网页图标管理
- 2024-10-31Excel数据导出课程:新手从入门到精通的实用教程
- 2024-10-31Excel数据导入课程:新手入门指南
- 2024-10-31RBAC的权限课程:新手入门教程
- 2024-10-31Svg Sprite Icon课程:新手入门必备指南
- 2024-10-31怎么配置 L2TP 允许多用户连接-icode9专业技术文章分享
- 2024-10-31怎么在FreeBSD上 安装 OpenResty-icode9专业技术文章分享
- 2024-10-31运行 modprobe l2tp_ppp 时收到“module not found”消息提醒是什么-icode9专业技术文章分享
- 2024-10-31FreeBSD的下载命令有哪些-icode9专业技术文章分享