webpack的四层理解（一、基本认识）

已于 2023-12-26 15:31:42 修改
阅读量349 收藏 8
点赞数 8
分类专栏： webpack 文章标签： webpack 前端
于 2023-12-26 14:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39351822/article/details/135214662
版权

webpack是什么

官网定义

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具

似乎不太好理解，但是这也是正常现象，很多官网的定义在追求严谨和准确的表达的同时，不得不牺牲掉理解的方便性

现代 JavaScript 应用程序

以前的前端应用程序是一个项目文件夹下包含html，js，css，图片等静态资源，他们之间相互引用，可以运行在浏览器中展示页面内容，但是开发效率比较慢。

现在的前端应用程序，基于css出现了预处理器scss、less，基于js出现了vue、react等等，这些都是日常开发中不可或缺的，但是在我们的宿主环境（浏览器）根本就不认识这些东西，不能直接运行；“开发效率提高了，但是不能运行了”，gulp、rollup、webpack等打包工具应运而生；

模块打包

一个包含源码的包packageA，经过打包工具生成了另外一个包packageA'，打包后的packageA'可以放在服务器上，通过浏览器访问，并且能正常渲染和交互操作；

打包工具通过开发人员配置的信息，处理源码，生成目标文件

自己的理解

webpack是一个打包工具，把宿主环境（浏览器、node）不能解析的使用高级语法编写的前端应用程序，翻译成宿主环境（浏览器、node）能运行的代码

webpack提供了哪些关键功能

本地服务器

假设没有本地服务器，我们的开发流程是很麻烦的，流程图大致如下：

有本地服务器，可以大大的简化我们的开发流程，流程图大致如下:

热更新

假设只有本地服务器，没有热更新，那么每次代码开发完成，编译结束，需要手动刷新一下页面，流程图如第二张图

sourceMap

方便开发环境，调试代码；生产环境为了优化体积，需要关闭，sourceMap有很多配置，不同的配置定位代码的精确度不同

打包

wepack的核心功能，后续的文章会解析，打包相关的api、配置信息、关键概念

weixin_39351822
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webpack基本配置
03-08
Webpack 是一个流行的前端模块打包工具，它允许开发者将JavaScript、CSS、图片等资源组合成一个或多个优化后的静态文件，以便在网页上高效地加载和运行。Webpack 的核心概念是基于模块化的思想，通过配置文件...
webpack-fundamentals:Webpack基本示例
04-28
学习 Webpack 不仅要理解其基本原理，还要掌握如何与其它工具（如 Babel、ESLint、Prettier 等）集成，以及如何优化构建过程，如代码分割（Code Splitting）、按需加载（Lazy Loading）和缓存策略等。 在实际项目中...
webpack的基本原理及手动配置webpack的详细步骤
07-03
以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...
webpack （打包react)基本demo
03-27
本文件是为了配合webpack2 打包 react 这篇博文路径教程的 demo文件： http://blog.csdn.net/xuelang532777032/article/details/66969574 方便各位同学下下来学习webpack 打包 react 。
如何实现一个webpack模块解析器
12-11
在深入探讨如何实现一个webpack模块解析器之前，我们先理解一下webpack的核心概念。Webpack是一个现代JavaScript应用程序的静态模块打包工具，它将项目中的各种资源（如JavaScript、CSS、图片等）视为模块，通过构建...
使用webpack搭建一个vue demo
01-08
但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 ...
深入理解Webpack 中路径的配置
08-30
深入理解Webpack 中路径的配置 在 Webpack 中，路径配置是非常重要的一部分，直接影响着项目的构建和输出。下面，我们将深入了解 Webpack 中路径配置的相关知识点。 一、 Context Context 是 webpack 编译时的...
**webpack 基本使用**
08-20
webpack 基本使用。开发模式：1.处理样式资源【处理 Css、Less、Sass、Scss、Styl 样式资源】2.处理图片资源，3.处理字体图标资源，4.处理其他资源，5.处理js资源，6.处理html资源。生产模式：1.Css 处理【提取 Css ...
webpack之旅: 深入理解Plugin
01-08
我们之前说plugin的时候也说到了，plugin插件的底层是一个类，它会在webpack打包的某一时刻被执行。那么我们现在就开始带大家去编写一个Plugin插件类： 我们首先创建一个叫做copyright-webpack-plugin.js的文件； ...
webpack-starter:基本Webpack入门项目
04-27
开箱即用，可为我提供以下基本信息： Javascript ES6（Babel） 萨斯 自动添加前缀和压缩CSS文件（postcss / autoprefixer，cssnano） 具有自动重新加载浏览器的开发服务器（WebpackDevServer） 入门HTML模板...
webpack_starter:WEBPACK基本配置文件
05-18
Webpack 是一个流行的 JavaScript 应用程序打包工具，它将各种模块和资源组合成单个或多个优化过的静态文件，便于部署到生产环境。在 `webpack_starter` 中，我们将探讨 Webpack 的基本配置，了解如何安装和启动项目...
利用webpack理解CommonJS和ES Modules的差异区别
10-15
本文将通过使用webpack来深入理解这两种规范的差异。 首先，CommonJS是Node.js环境下的默认模块系统，它允许模块通过`require()`方法来导入其他模块，并使用`module.exports`或`exports`对象来导出模块内容。在...
webpack开发环境和生产环境的深入理解
10-17
### Webpack开发环境与生产环境深入理解 #### 一、引言 Webpack 是一个非常流行的前端资源打包工具，被广泛应用于构建现代Web应用程序。在实际项目中，开发环境与生产环境有着本质的区别，这就要求我们在配置...
深入理解 webpack 文件打包机制(小结)
08-28
Webpack 是一个流行的模块打包工具，它将前端应用中的各种资源（如 JavaScript、CSS、图片等）转换成浏览器可执行的格式。本篇文章将深入探讨 Webpack 的文件打包机制，包括单文件打包、代码分割、不同版本间的差异...
webpack基本配置案例
08-10
学习和理解Webpack的基本配置，是现代前端开发不可或缺的一部分。通过熟练掌握这些配置，开发者能够更好地管理和优化项目，提高开发效率，确保应用程序的性能和可维护性。随着对Webpack的深入理解和实践，你还可以...
webpack-starter:一个简单的webpack入门
05-15
Webpack入门 用法 克隆此存储库 $ git clone git@github.com:calazans10/webpack-starter.git 将目录更改为应用程序文件夹 $ cd webpack-starter 安装依赖项 $ npm install 运行服务器 $ npm start 使用浏览器，...
浅谈webpack 四个核心概念之Entry
01-19
因为webpack是基于nodejs的一款工具，所以在学习过程中涉及到的nodejs知识也会进行解释进行发散性拓展。 webpack中文文档 一、module.exports module.exports = { entry: './path/to/my/entry/file.js' }; ...
浅谈一个webpack构建速度优化误区
10-16
主要介绍了浅谈一个webpack构建速度优化误区，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
脚手架vue-cli工程webpack的基本用法详解
12-09
随着工程的构建要求的增加，webpack.config.js内的配置项目也会随之增加，webpack还有许许多多的选项提供给我们进行灵活配置，它只是一个构建工具，我们只需要了解在Vue项目中它基本能为我们做到的工作、最小化的...
对webpack的理解
最新发布
05-25
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具，它可以将各种类型的文件（包括 JavaScript、CSS、图片、字体等）视为模块，通过加载器（loader）和插件（plugin）对这些模块进行处理，最终生成可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值