Webpack基础使用

目录

一.什么是Webpack

二.为什么要使用Webpack

三.Webpack的使用 

1.下载yarn包管理器

2.Webpack的安装

 3.Webpack的简单使用

4.效果

 四.Webpack打包流程


一.什么是Webpack

Webpack是一个静态模块打包工具

二.为什么要使用Webpack

 

在开发中,我们常常会遇到:

  • 使用sass和less语法书写样式需要转译
  • 使用es6及更高版本的语法来简化代码,浏览器无法识别
  • 项目体积大,不利于上线

webpack就可以解决上述问题:

  • 支持所有类型文件的打包
  • 支持less/sass => css
  • 支持ES6/7/8 => ES5
  • 压缩代码, 提高加载速度

由此可见,webpack就是前端开发人员技术库中的必需品

三.Webpack的使用 

在使用前需要安装node环境

1.下载yarn包管理器

npm i -g yarn

2.Webpack的安装

首先创建项目文件夹并在项目文件夹内初始化包环境

yarn init -y

安装 webpack 依赖包

 yarn add webpack webpack-cli -D

在 package.json 中, 配置 scripts 自定义打包命令

scripts: {"build": "webpack"
}

 3.Webpack的简单使用

新建 src/js.js ,写入并导出需要打包的代码,例如:

export const add = (a, b) => a + b

新建 src/index.js 导入使用 

// webpack打包的入口
import { add } from './js'
console.log(add(2, 3));

运行自定义打包命令

yarn build

4.效果

生成 dist 目录(与src文件夹同级)和其中的 main.js 文件

(()=>{"use strict";console.log(5)})();

 四.Webpack打包流程

  • 解析配置文件:Webpack 会读取并解析配置文件(通常是 webpack.config.js 文件),并根据配置生成一个 Compiler 对象
  • 读取入口文件:Webpack 根据配置中的入口文件,读取这些文件及其依赖的模块,并将它们组成一个依赖图
  • 解析模块依赖:Webpack 会根据模块之间的依赖关系,递归地解析它们的依赖,直到所有的依赖都被解析完毕
  • 加载模块:Webpack 会根据模块的路径,使用相应的 Loader 加载模块的源代码,并将其转换为 Webpack 可以处理的形式。
  • 转换代码:Webpack 会根据配置中的插件,对加载的模块进行一系列的转换操作,比如压缩、合并、优化等
  • 生成代码:Webpack 会将所有模块转换后的代码合并成一个或多个文件,并输出到指定的输出目录中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿帕奇骆驼遇见Redis

键值商店的兰博基尼 Camel是最好的面包集成框架,在本文中,我将向您展示如何通过利用另一个出色的项目Redis使它更加强大。 Camel 2.11即将发布,具有许多新功能,错误修复和组件。 这些新组件中的几个是我创作的, red…

HTML 教程- (HTML5 标准)摘抄笔记

HTML 教程- (HTML5 标准) 教程网址:http://www.runoob.com/html/html-tutorial.html http://blog.csdn.net/ljfbest/article/details/6700148 HTML版本 从初期的网络诞生后,已经出现了许多HTML版本: 版本发布时间HTML1991HTML 1993HTML 2.01995HTML 3…

Java EE CDI ConversationScoped示例

在本教程中,我们将向您展示如何在Web应用程序中创建和使用ConversationScoped Bean。 在CDI中,bean是定义应用程序状态和/或逻辑的上下文对象的源。 如果容器可以根据CDI规范中定义的生命周期上下文模型来管理其实例的生命周期,则Java EE组件…

Git 中文教程

以下内容转载自:http://www.open-open.com/lib/view/open1328928294702.html Git是一个分布式的版本控制工具,本篇文章从介绍Git开始,重点 在于介绍Git的基本命令和使用技巧,让你尝试使用Git的同时,体验到原来一个版本…

php markdown的转化函数,markdown公式转为知乎格式

在知乎中写技术类文章,经常会用到markdown知乎文章可以导入markdown格式,但是不支持Latex公式。知乎大神提供了替代方案: https://zhuanlan.zhihu.com/p/69142198为实现自动化,用python将其简易实现,代码如下&#xff…

Java EE CDI Producer方法教程

这是CDI Producer方法的教程。 在CDI中,生产者方法生成一个可以注入的对象。 当我们要注入本身不是bean的对象,要注入的对象的具体类型在运行时可能有所不同,或者当对象需要一些bean构造函数不执行的自定义初始化时,可以使用生产者…

牛客网Java刷题知识点之方法覆盖(方法重写)和方法重载的区别

不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?query&asctrue&order&page6 方法重写的原则: 重写方法的方法名称、参数列表必须与原方法的相同,返回类型可以相同也可以是原类型的子类型(从Jav…

AngularJS的ng-repeat显示属性名和属性值

代码下载&#xff1a;https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.rar 代码&#xff1a; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app&qu…

2018.2.28(延迟加载和缓存)

1.延迟加载 编写配置 测试类 2.侵入式延迟 3.深度延迟 4.一级缓存 5.二级缓存 配置 测试类 转载于:https://www.cnblogs.com/xu06123/p/8483245.html

小爬麦子学院教师

任务描述&#xff1a;将麦子学院指定网页下教师信息&#xff08;姓名&#xff0c;职称&#xff0c;介绍信息&#xff09;爬取下来并保存到数据库。 1.页面分析&#xff1a; 2.代码&#xff1a; mydb.py: #!/usr/bin/env/python #coding:utf-8 操作数据库import MySQLdb as dbcl…

[HNOI2015] 落忆枫音

题目描述 「恒逸&#xff0c;你相信灵魂的存在吗&#xff1f;」 郭恒逸和姚枫茜漫步在枫音乡的街道上。望着漫天飞舞的红枫&#xff0c;枫茜突然问出这样一个问题。 「相信吧。不然我们是什么&#xff0c;一团肉吗&#xff1f;要不是有灵魂......我们也不可能再见到你姐姐吧。」…

Java中的模板方法设计模式

模板方法模式是一种行为设计模式&#xff0c;它为算法提供了基础方法&#xff0c;称为模板方法&#xff0c;该方法将其某些步骤推迟到子类中&#xff0c;因此算法结构相同&#xff0c;但某些步骤可以由子类根据上下文重新定义。 模板是指预设格式&#xff0c;例如HTML模板&…

winform中的数据绑定

1. 简单的数据绑定 例1 using (SqlConnection conn new SqlConnection(ConfigurationManager.ConnectionStrings["connStr"].ToString())) { SqlDataAdapter sda new SqlDataAdapter("Select * From T_Class Where F_TypeProduct order by F_RootID,F_Order…

jQuery数据表和Java集成

jQuery DataTables是一个开放源代码插件&#xff0c;用于在浏览器中创建表。 它具有许多功能&#xff0c;例如排序&#xff0c;服务器端处理&#xff0c; JQUERY UI主题滚动。 该插件的下载链接&#xff1a; http://www.datatables.net/download/ 在本演示中&#xff0c;我…

CSS 属性 - 伪类和伪元素的区别

伪元素和伪类之所以这么容易混淆&#xff0c;是因为他们的效果类似而且写法相仿&#xff0c;但实际上 css3 为了区分两者&#xff0c;已经明确规定了伪类用一个冒号来表示&#xff0c;而伪元素则用两个冒号来表示。 :Pseudo-classes ::Pseudo-elements 但因为兼容性的问题&…

class-感知机Perception

1 感知机模型1.1 模型定义2 感知机学习策略2.1 数据的线性可分性2.2 学习策略3 学习算法3.1 算法原始形式3.2 收敛性3 学习算法的对偶形式1 感知机模型 感知机perceptron是二类分类问题的线性分类模型&#xff0c;输入为实例的特征向量&#xff0c;输出为实例的类别&#xff08…

Java中的方法调用有多昂贵

我们都去过那儿。 在查看设计不良的代码的同时&#xff0c;听听作者对人们永远不应该牺牲性能而不是设计的解释。 而且&#xff0c;您不能说服作者摆脱其500行方法&#xff0c;因为链接方法调用会破坏性能。 好吧&#xff0c;这可能在1996年左右是正确的。 但是自那时以来&…

1.HTML

HTML简介 hyper text markup language 即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接&#xff0c;甚至音乐、程序等非文字元素。 标准模板 <!DOCTYPE html> <html lang"en"><head> <meta charset"U…

php记住表单数据cookie,【PHP基础】cookies和session

1.Cookiescookie 常用于识别用户。cookie 是服务器留在用户计算机中的小文件。每当相同的计算机通过浏览器请求页面时&#xff0c;它同时会发送 cookie。通过 PHP&#xff0c;您能够创建并取回 cookie 的值。1.1、如何创建 cookie&#xff1f;setcookie() 函数用于设置 cookie。…

C#调用Power Shell 管理Office365 执行脚本时遇到的问题

Power Shell管理Office参考http://www.mamicode.com/info-detail-494553.html C#调用Power Shell 参考 https://www.cnblogs.com/chenkai/archive/2010/11/09/1872471.html string pwd "**********";string userName "**********";StringBuilder ss new…