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,处理静态资源文件请求
webpack入门进阶调优第一章相关推荐
- 大数据面试通关手册 | Kylin入门/原理/调优/OLAP解决方案和行业典型应用
Kylin入门/原理/调优/OLAP解决方案和行业典型应用一网打尽. 一:背景历史和使命 背景和历史 现今,大数据行业发展得如火如荼,新技术层出不穷,整个生态欣欣向荣.作为大数据领域最重要的技术的 A ...
- Spring入门到精通:第一章 基础入门:1.Spring框架概述
Spring入门到精通:第一章 基础入门:1.Spring框架概述 前言:为什么要学习Spring框架? 为什么要学习Spring框架呐? (1)使用广泛:现在很多的企业都有Spring的影子,不管是 ...
- 1. Vue从入门到精通(第一章 vue核心)
Vue从入门到精通(第一章 vue核心) 第一章 Vue核心 1. Vue简介 1.1 Vue是什么? 1.2 Vue的作者以及迭代版本 1.3 Vue的特点 2. 搭建Vue开发环境 2.1 安装V ...
- Cattographer从入门到精通__第一章
Cattographer从入门到精通--第一章 第一讲-Cartographer的编译与安装 图一.cartigrapher_install安装包 **//auto-carto-build.sh脚本文 ...
- 服务器内存一般多大_性能调优第一步,搞定服务器硬件选型
服务器选型是Linux性能调优的第一步. 无论你是自行购买服务器进行托管,还是租用服务器,购买云主机,都要面临的一个问题:选择服务器的硬件配置. 我们需要从不同角度.多个方面来决定选择一台什么样的服务 ...
- redis decr 防止超卖_Redis基础、高级特性与性能调优——一篇文章搞定
本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...
- 【SQL进阶教程】第一章 case表达式
本系列基于<SQL进阶教程>(如下图)学习,实现了书中代码及练习题代码.PS:电子书请大家各自默默脚本之家. [知识点1]case表达式概述 Case表达式有简单case表达式和搜索cas ...
- B站MoshSQL进阶教程【第一章】做好准备
[第一章]做好准备 前言 一.SQL是什么? 数据库的概念 数据库的种类 数据库管理系统(DBMS) DMBS概念 流行的DBMS: SQL概念 二.MySQL Windows安装步骤 官网下载MyS ...
- hbase原理与实践_HBase 性能调优第一弹:内存篇
这是使用 HBase 最不可避免的一个话题,就是 HBase 的性能调优,而且通常建立在我们对 HBase 内部运行机制比较了解的基础上进行的,因此无论怎么说,调优这块都是一个相对复杂的事情.这一篇我 ...
最新文章
- JavaScript DOM 学习笔记(四)
- 使用Junit单元测试:Cannot instantiate test(s): java.lang.SecurityException: Prohibited package name: java
- Rsync 基本安装及同步(一)
- fiddler如何设置过滤https_Google Analytics如何设置含有过滤器的帐户数据视图
- Spring AOP(三)--XML方式实现
- LeetCode之Keyboard Row
- 世界主要国家的网络管理体制
- oracle 数据库为nomount状态,oracle 数据库为nomount状态
- VMWaer克隆centos后网络的问题解决
- 让无数人头疼的网络攻击到底是什么?究竟隐藏了哪些不为人知的秘密?
- MySQL数据库(1):数据库 Database 基本概念
- 自学Python第二十六天- Tornado 框架
- 数据结构 Hash,哈希冲突,哈希聚集,BloomFilter,分布式一致性hash
- VM定位模块之BLOB分析
- 《大唐豪侠》架构开发纪实
- 服务器拷文件突然自动关机,windows server 2008R2自动关机解决方法
- 无穷小和无穷大·漫画
- 智慧城市概述:算法与数据链接下的未来设想
- 「手把手教你」Python计算股票收益率、Alpha和Beta值
- JS中的JSON.Stringify 方法详解