webpack入门进阶调优第一章

1.1何为Webpack

webpack是开源的JS模块打包工具

核心功能是解决模块之间的依赖,吧哥哥模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件。这个过程叫模块打包

1.2为何需要Webpack

1.2.1何为模块

在设计程序结构时,更好的组织方式是按照特定的功能将其拆分为多个代码段,每个代码段实现一个特定的目的。可进行独立的设计开发测试,最终通过接口来组合在一起,这就是基本的模块化思想。

1.2.2 JavaScript中的模块

JavaScript中没有模块,Brendan Rich最初设计语言只定位成小型脚本语言。再过去很长时间只能通过script标签将他们一个个插入页面,缺点很多:

  • 需要手动维护加载顺序,依赖关系隐式
  • 每个script意味一次请求,拖慢网页渲染速度
  • 每个script标签顶层作用域即全局作用域,容易造成全局作用域的污染。

模块化解决了上述问题:

  • 通过导入导出语句清晰看到模块间的依赖关系
  • 模块可以借助工具进行打包,在页面中只需要加载合并后的资源文件,减少网络开销
  • 多个模块之间作用域隔离,彼此不会用命名冲突

2015年, ES6正式定义了JavaScript模块标准!已得大多数现代浏览器支持,但实际应用方面还需要等待一段时间,主要原因:

  • 无法使用 code splitting 和 tree shaking
  • 大多数npm模块还是CommonJS形式,浏览器不支持其语法,没法世界拿来用
  • 仍然需要考虑个别浏览器及平台的兼容性问题

那么,如何让我们的工程在使用模块化的同时也能正常运行在浏览器中,就到了模块打包工具的出场了。

1.2.3模块打包工具

任务是解决模块间的依赖,使其打包后的结果能运行在浏览器上。工作方式主要分两种:

  • 将存在依赖关系的模块按照特定规则合并为单个JS文件,一次全部加载进页面
  • 在页面初始时加载一个入口模块,其他模块一步的进行加载

目前社区中比较流行的模块打包工具Webpack、Parcel、Rollup等

1.2.4 为何选择Webpack

1) Webpack默认支持多种模块标准,包括AMD、CommonJS,以及最终的ES6模块

2)Webpack有完备的代码分割(code splitting)解决方案

3)Webpack可以处理各种类型的资源

4)Webpack拥有庞大的社区支持。

1.3安装

安装Node.js环境

node -v
npm -v

npm安装Webpack方式:一种全局安装,一种本地安装

全局安装Webpack好处是npm帮我们绑定一个命令行环境变量,一次安装处处运行

本地安装则会添加其成为项目中的依赖,只能在项目内部使用。

建议本地安装方式,主要原因:

  • 全局安装与他人进行项目协作时,由于每个人系统中Webpack版本不同,可能会导致输出结果不一致
  • 部分依赖于Webpack的插件会调用项目中的Webpack的内部模块,这种情况下仍然需要在项目本地安装Webpack,而如果全局本地都用则容易混淆

新建一个工程目录

npm init

生成一个package.json文件

安装Webpack命令

npm i webpack webpack-cli --save-dev

webpack是核心模块,webpack-cli则是命令行工具,在本例中两者是必需的

安装结束后,在命令行执行npx webpack -v 以及 npx webpack-cli -v 可显示各自的版本号,即证明安装成功

1.4打包第一个应用

工程目录添加以下几个文件

index.js

import addContent from "./add-content.js";
document.write("my first Webpack app.<br />");
addContent();

add-content.js

export default function () {document.write("Hello world!");
}

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>My first Webpack app.</title></head><body><script src="./dist/bundle.js"></script></body>
</html>

在控制台输入打包命令

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

打包效果

用浏览器打开index.html,如图

 

 回顾指令

entry是资源打包入口。webpack从这里开始进行模块查找

output-filename是输出资源名,打包完成出现dist目录包含bundle.js是Webpack打包结果

mode是打包模式(development、production、none),当置于development和production模式下自动添加适合当前模式的一系列配置,减少人为工作量。开发环境一般设置为development模式

1.4.2使用npm script

为了使命令行指令简洁,我们可以在package.json中添加一个脚本命令

"scripts": {"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"},

重新打包输入npm命令即可

npm run build

1.4.3使用默认目录配置

通常我们分别设置源码目录与资源输出目录

工程中创src目录,并将index.js和add-content.js移动到该目录下,资源输出目录,Webpack已经默认是/dist,源代码入口Webpack默认就是src/index.js。可以省略掉entry配置

编辑package.json:

"scripts": {"build": "webpack --output-filename=bundle.js --mode=development"},

1.4.4使用配置文件

 Webpack有非常多的配置项以及对应的命令行参数

npx webpack -h

当项目需要越来越多的配置项时,命令维护困难。所以创建一个配置文件,在Webpack每次打包是读取该配置即可

工程下创建 webpack.config.js

module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",},mode: "development",
};

值得注意的是Webpack对于output.path的要求是使用绝对路径(从系统根目录开始的完整路径),之前我们在命令行中为了简洁所以使用了相对路径,而在webpack.config.js中,我们通过调用node.js的路径拼装函数——path.join,将__dirname与dist连接起来,得到了最终的资源输出路径。

去掉package.json中配置的打包参数了

"scripts": {"build": "webpack"},

1.4.5webpack-dev-server

提高调试效率的本地开发工具 文件修改,自动刷新

npm install webpack-dev-server --save-dev

ps:--save-dev将工具作为devDependencies开发环境依赖,工程上线时要进行依赖安装可以通过

npm install --production过滤掉devDependencies中的模块

为了便捷启动webpack-dev-server,添加dev指令

"scripts": {"dev": "webpack-dev-server","build": "webpack"},

更改webpack.config.js

module.exports = {entry: "./src/index.js",output: {filename: "./bundle.js",},mode: "development",devServer: {publicPath: '/dist',}
};

添加devServer对象专门放webpack-dev-server配置。webpack-dev-server可以看做服务者,接收浏览器请求,将资源返回。当服务启动时,会先让Webpack进行模块打包并将资源准备好。当接收到浏览器的资源请求时,会首先进行URL地址校验。如果改地址是资源服务地址(上面配置的publicPath),就从打包结果中寻找该资源返回浏览器。反之,地址不属于资源服务地址,则直接读取硬盘中的源文件并将其返回。

webpack-dev-server两大职能:

1.令Webpack进行模块打包,并处理静态资源文件请求

2.作为普通的Web Server,处理静态资源文件请求

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

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

相关文章

python类的空间问题及类之间的关系

类的空间问题及类之间的关系 类的空间问题 1.何处可以添加对象属性 class A:def __init__(self,name):self.name namedef func(self,sex):self.sex sexobj A("alex") obj.age 18 # 通过__init__方法添加 print(obj.__dict__) obj1 A("wusir") obj.fun…

计算机视觉应关注的资源

来自美国帝腾大学的链接。 Camera Calibration Links to toolboxes (mostly MATLAB) for camera calibration. Paul Debevec. Modeling and Rendering Architecture from Photographs. Marc Pollefeys, Tutorial on 3D Modeling from Images,, ECCV 2000, Available here: not…

Angular 内容投影 II

内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容。 简单来说,angular的内容投影就相当于vue的内容插槽slot。所有一下就能懂了。 1、单插槽内容投影 单插槽内容投影是指创建一个组件,你可以在其中投影一个组件。如果只有一个ng-content,不需要sel…

麻省理工学生发明 震惊世界

核心提示&#xff1a;在普拉纳夫看来&#xff0c;数字信息以像素的形式被限制在显示屏幕之中。他发明的"第六感装置"震惊全场&#xff0c;让世界为之惊叹。 MIT(麻省理工)印度裔学生Prarnav Mistry的天才发明:“第六感装置” 视频地址&#xff1a;http://v.youku.com…

Selenium常用API的使用java语言之13-多表单切换

在 Web 应用中经常会遇到 frame/iframe 表单嵌套页面的应用&#xff0c; WebDriver 只能在一个页面上对元素识别与 定位&#xff0c; 对于 frame/iframe 表单内嵌页面上的元素无法直接定位。 这时就需要通过 switchTo().frame()方法将当前定 位的主体切换为 frame/iframe 表单的…

yarn下载依赖慢的解决方法

首先设置npm或者yarn镜像为淘宝镜像 详情&#xff1a; 淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org OR yarn config set registry https://registry.npm.taobao.org 在项目的根目录添加.npmrc 或者 .yarnrc 把镜像源设置淘宝镜像&#xff0c;nod…

立身成败 在于所染

唐朝有一位正直的丞相很受唐太宗的赏识&#xff0c;他叫魏征。他说过一句话&#xff1a;“立身成本在于所染”。这句话的意思就是说&#xff0c;一个人一生成败的关键在于交友。 孔子曰&#xff1a;“与善人居&#xff0c;如入芝兰之室&#xff0c;久而不闻其香&#xff0c;即与…

Java生鲜电商平台-优惠券系统的架构设计与源码解析

Java生鲜电商平台-优惠券系统的架构设计与源码解析 电商后台&#xff1a;实例解读促销系统 电商后台系统包括商品管理系统、采购系统、仓储系统、订单系统、促销系统、维权系统、财务系统、会员系统、权限系统等&#xff0c;各系统之间相互关联、相互依托&#xff0c;为前端的正…

react-router-dom v6.1.1 使用方式

v5版本例子代码 import {BrowserRouter as Router, Switch, Route} from react-router-dom import App from /App import Home from /views/Home/Home import Fast from /views/Fast/Fast import User from /views/User/Userconst BaseRouter () > {return (<Router>…

VC 2010下安装OpenCV2.4.4

说明&#xff1a; 安装平台&#xff1a;32位XP&#xff0c;VS2010&#xff1b;OpenCV 2.4.4不支持VC 6.0&#xff1b;网上有很多用CMake编译OpenCV的安装教程&#xff0c;这里建议先不要自己编译&#xff0c;如果使用预编译好的库有问题&#xff0c;再尝试自己编译。希望大家好…

vue3源码中的最长递增子序列

求解最长递增子序列是一道经典的算法题, 多数解法是使用动态规划的思想&#xff0c;算法的时间复杂度是O(); 而Vue.js内部使用的是维基百科提供的一套“贪心二分查找”的算法; 贪心算法的时间复杂度是O(n)&#xff0c;二分查找的时间复杂度是O(logn)&#xff0c;总时间复杂度…

认识“数字图像”

不同领域的人对图像的概念有着不同的理解。从工程学角度上讲&#xff0c;“图”是物体透射或反射光的分布&#xff1b;“像”是人的视觉系统对图的接收在大脑中形成的印象或认识。因此&#xff0c;图像常与光照、视觉等概念联系在一起&#xff0c;光的强弱、光的波长以及物体的…

Java编程基础阶段笔记 day04 Java基础语法(下)

​ 面向对象编程 笔记Notes 面向对象三条学习主线 面向过程 VS 面向对象 类和对象 创建对象例子 面向对象的内存分析 类的属性&#xff1a;成员变量 成员变量 VS 局部变量 类的方法 方法的重载 可变个数形参 面向对象&#xff1a;封装性 访问权限修饰符 构造方法&…

汉诺塔递归算法

起源&#xff1a; 汉诺塔&#xff08;又称河内塔&#xff09;问题是源于印度一个古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子…

Java编程基础阶段笔记 day 07 面向对象编程(上)

​ 面向对象编程 笔记Notes 面向对象三条学习主线 面向过程 VS 面向对象 类和对象 创建对象例子 面向对象的内存分析 类的属性&#xff1a;成员变量 成员变量 VS 局部变量 类的方法 方法的重载 可变个数形参 面向对象&#xff1a;封装性 访问权限修饰符 构造方法&…

谈“发表(撰写)学术论文的注意事项”

题记&#xff1a;做两个核心学术期刊的“数字图像处理”类审稿专家有一段时间了&#xff0c;在审稿过程中发现存在很多问题&#xff0c;所以在此就撰写学术论文过程中的一些注意事项&#xff0c;跟大家交流一下&#xff08;当然&#xff0c;文中的很多观点也是一些资深主编的看…

Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口

最近遇到一个项目需求&#xff1a;Angular中父窗口新开的子窗口提交完信息关闭的时候刷新父窗口。 知识点&#xff1a; window.opener 概述 返回打开当前窗口的那个窗口的引用&#xff0c;例如&#xff1a;在window A中打开了window B&#xff0c;B.opener 返回 A. 语法 …

图像边缘特征

图像边缘是图像的重要特征&#xff0c;是图像中特性&#xff08;如像素灰度、纹理等&#xff09;分布的不连续处&#xff0c;图像周围特性有阶跃变化或屋脊状变化的那些像素集合。图像的边缘部分集中了图像的大部分信息&#xff0c;一幅图像的边缘结构与特点往往是决定图像特质…

HDU 6631 line symmetric(枚举)

首先能想到的是至少有一对相邻点或者中间间隔一个点的点对满足轴对称&#xff0c;那么接下来只需要枚举剩下的点对是否满足至多移动一个点可以满足要求。 第一种情况&#xff0c;对于所有点对都满足要求&#xff0c;那么Yes。 第二种情况&#xff0c;有一个点不满足要求&#x…

学习数字图像处理经验谈

一、面向应用&#xff1a;层层分解、抓住要点 我们学习数字图像处理的最终目的还是应用&#xff0c;不管是用它来研制产品还是研发项目抑或是研究课题&#xff0c;都要用数字图像处理的理论、方法和技术来解决实际问题。在此过程中&#xff0c;提高效率是非常重要的&#xff0c…