1、webpack

最新推荐文章于 2024-09-24 08:59:27 发布
最新推荐文章于 2024-09-24 08:59:27 发布
阅读量121 收藏
点赞数
分类专栏： webpack 文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45065754/article/details/124696754
版权

Webpack官网：https://www.webpackjs.com/

webpack

  • Webpack 就是一个前端资源加载/打包工具。
  • 它的作用是将多种静态资源 js、css、less 转换打包成一个或多个 bundle，减少页面请求，优化性能。比如把多个JS打包成一个JS文件，把多个CSS文件打包到一个CSS文件，这样的话就不用一个个来导入。
  • Webpack 有5个关键核心点：
  • 1、entry：它是导入模块和库的入口起点
  • 2、output：告诉 webpack 在哪里输出它所创建的 bundles
  • 3、loader：处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）打包起来，比如说CSS和图片等，需要转换才能打包
  • 4、plugins：用来处理各种各样的任务，比如自动生成html文件，清除dist目录的插件等等。
  • 5、modle：打包模式，development是没有压缩的，production是压缩的
jasmine_qiqi
关注
专栏目录
webpack踩坑~
m0_58893670的博客
03-03 1380
全局安装 webpack 后，查看版本号，显示 CLI for webpack must be installed. 输完 yes 仍然报错 webpack 安装完需要安装 webpack -cli 全局安装 webpack -cli：npm i -g webpack -cli 最后结果： webpack: 5.69.1 webpack-cli: 4.9.2 webpack-dev-server not installed ...
Webpack详解
警警的博客
07-17 2503
Webpack 是一个现代 JavaScript 应用程序的。它允许开发者将项目中的资源（如 JavaScript、CSS、图片等）视为，通过这些模块之间的，将它们成一个或多个 bundle（捆绑包），这些 bundle 可以在浏览器中加载和执行。Webpack 提高了开发效率，简化了前端项目的构建流程，是现代前端开发不可或缺的工具之一。
安装webpack后显示webpack: not installed
qq_43622870的博客
02-04 1820
（个人记录） 看看你当前文件夹下是不是有个node_modules文件夹，初始化项目的时候自动生成 删除，重新 npm install webpack -g
初试构建工具Webpack
howard2005的专栏
08-31 1431
在本次实战中，我们通过以下步骤成功地使用`Webpack`打包了一个简单的项目。
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack使用详解
ScottePerk的博客
11-18 2443
官方定义：从本质上来说，webpack是一个现代的JavaScript的静态模块打包工具。webpack是前端工程化的一个解决方案。提供了前端模块化功能支持，模块混淆，代码压缩，处理浏览器JS兼容性，性能优化等强大功能。
（1）webpack介绍
Java田根旺
01-22 2524
一、webpack简介 webpack=Web Package，webpack是一个现代JS应用程序的静态模块打包器（module bundler） 模块（模块化开发，可以提高开发效率，避免重复造轮子） 打包（将各个模块，按照一定的规则组装起来） 官网：http://webpack.js.org/ 特点：1.功能强大（打包、构建、发布Web服务）2.学习成本高 我们之前学习过一个自动化构建工具，叫Gulp，但是现在企业不在适用，因为由于webpack越来越强大，将Gulp已经淘汰掉了。 二、如
webpack
qq_42586648的博客
02-21 2355
1.webpack定义/什么是webpack webpack是一个静态模块打包器（bundler）。可以帮助我们处理模块间的依赖关系。当webpack处理应用程序时，他就会递归的构建一个依赖关系图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。 tips：webpack 不是解释器，而是一个模块打包工具（module bundler），只能认识import等简单的语法。不仅有es这样的模块规范，还有commonJS、CMD、AMD这样的规范，webpack对这些模块规范一样可以.
1.webpack基础
草木红的博客
07-02 2821
commonJS, ES6 module , 安装webpack, webpack 配置
webpack基本配置
weixin_48384413的博客
11-23 2535
webpack基础配置
webpack 1.x升级过程中的踩坑总结大全
08-29
webpack1已结不再维护了，官方在主推webpack2，最近在升级webpack过程中遇到了不少的问题，所以下面这篇文章主要给大家总结了一些在webpack 1.x升级过程中的遇到的坑，以及详细的解决方法，需要的朋友可以参考借鉴，...
网站子目录部署VUE webpack 打包资源文件路径的正确引用方式1
08-03
在打包后，Webpack不会自动将`/static/img/1.jpg`更改为`/m/static/img/1.jpg`，导致在线上环境无法找到图片资源，从而出现404错误。 解决这个问题的方法是利用Webpack的`MiniCssExtractPlugin`插件和`url-loader`...
webpack1.x指导文档
05-18
### Webpack 1.x 指导文档 #### 1.1 概述 Webpack 是一款用于打包前端模块的工具，主要用于处理 JavaScript 文件，并能够转换、捆绑、打包其他类型的静态资源，例如 CSS、图片、字体文件和模板等。在前端项目开发...
从0到1 Webpack搭建Vue3开发、生产环境
qq_43447509的博客
12-01 719
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。
4-1 webpack处理HTML内嵌图片（以及错误解决）
xt_123456的博客
05-18 613
在html中引入图片时，比如： <body> <img src="Show.jpg"> </body> 如果不使用loader，就会出现路径错误，图片不显示的情况： 经过loader处理后，图片就可以正常显示了。 具体步骤 1.安装html-loader 打开终端，进入到项目文件夹路径，输入命令cnpm install --save-dev html-loader 2.配置webpack.config.js文件 在module.exports = {}里的mo
【Webpack】Tree Shaking
小秀的博客
09-20 543
静态分析是一种在无需运行代码的情况下，基于代码的语法和结构，分析代码的行为及性能的方法。Webpack 的 Tree Shaking 机制的原理是通过静态分析代码的模块依赖图，把没有用到的代码“剪掉”，从而减少打包后的代码体积。1）标记(Marking)：Webpack 会从入口文件出发，递归地分析代码中的模块依赖，标记出用到的模块和导出的函数或变量。2）摇树(Shaking)：基于上一步的标记结果，Webpack 会移除未被使用的模块和代码（即那些没有被标记的部分）。
现代前端构建工具对比：Vue CLI、Webpack 和 Vite
Ammmmmmmmn的博客
09-21 697
特性Vue CLIWebpackVite启动速度🐢 较慢🐢 较慢🚀 非常快开发体验👍 良好，内置热更新🤷‍♂️ 灵活但较慢🌟 极快的热更新，开发体验好配置难度🎮 简单，开箱即用🧩 复杂且灵活📘 简单，默认配置即可生态系统🌲 丰富的 Vue 插件🌳 非常成熟🌱 生态系统在快速发展中适合项目类型🏢 Vue 项目，特别是中大型项目🏗️ 任何类型的复杂项目🏡 Vue 和其他现代框架的小型项目。
【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存
最新发布
小秀的博客
09-24 263
【代码】【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存。
前端性能优化
qq_29579625的博客
09-21 1068
前端性能优化是一个系统性工作，它涉及代码开发、打包、上线部署等多个阶段。下面从这三个阶段分别进行详细讲解及示例说明。
在 Mac上的webpack.ps1 webpack-cli.ps1 webpack.cmd webpack-cli.cmd怎么删除
05-29
1. 打开终端应用程序。 2. 进入到包含这些文件的目录中，可以使用 `cd` 命令切换到目录。 3. 输入 `rm 文件名` 命令，将文件名替换为需要删除的文件名，按回车键执行命令。 4. 如果文件删除成功，则终端不会有任何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jasmine_qiqi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值