node.js之打包工具webpack
什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
为什么重复造轮子
市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序。最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。
这些已有的模块化工具并不能很好的完成如下的目标:
- 将依赖树拆分成按需加载的块
- 初始化加载的耗时尽量少
- 各种静态资源都可以视作模块
- 将第三方库整合成模块的能力
- 可以自定义打包逻辑的能力
- 适合大项目,无论是单页还是多页的 Web 应用
Webpack的特点和优势
Webapck 和其他模块化工具有什么区别呢?
代码拆分
Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的快。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require(“./templates/” + name + “.jade”)。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。
环境了解
我们在当前的环境中指定的目录是在 /home/hubwiz/web下,才可以进行访问测试。
可以使用命令pwd查看我们当前指定的目录。
<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">pwd</span> /home/hubwiz/web</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
pwd命令用于显示当前目录。在环境中这个仓库位于/home/hubwiz/web。
我们在指定的目录下,预置一个静态页面(index.html)和一张logo图片,以及style.css文件,在后面的课程知识点中编译之后,访问测试,将会看到你编译的效果。
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ ls index<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.html</span> logo<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.png</span> node_modules style<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.css</span> scripts</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
node_modules中是我们预置好的几个模块,可以查看。
index.html页面中预置
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span>></span>欢迎学习Webpack课程!<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">h1</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
安装
首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js。
用 npm 安装 Webpack:
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>npm install webpack -g</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
此时 Webpack 已经安装到了全局环境下,本课程中我们已装好webpack,可以通过命令行 webpack -h 试试。
通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
<code class="hljs vala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#进入项目目录</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#确定已经有 package.json,没有就通过 npm init 创建</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#安装 webpack 依赖</span> $ npm install webpack --save-dev</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
Webpack 目前有两个主版本,一个是在 master 主干的稳定版,一个是在 webpack-2 分支的测试版,测试版拥有一些实验性功能并且和稳定版不兼容,在正式项目中应该使用稳定版。
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#查看 webpack 版本信息</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>npm info webpack<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#安装指定版本的 webpack</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>npm install webpack<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">@1</span>.<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">12</span>.x --save-dev</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
使用
首先可以先写个简单的静态页面 index.html。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- index.html --></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">charset</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"utf-8"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"bundle.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
之后创建一个 JS 入口文件 entry.js:
<code class="hljs delphi has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// entry.js</span> pico entry.js <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 进入编辑器输入</span> document.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">write</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'It works.'</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 保存并退出</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
最后编译 entry.js 并打包到 bundle.js,运行命令:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ webpack ./entry<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.js</span> bundle<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.js</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
如果成功,打包过程会显示日志:
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-label" style="box-sizing: border-box;">Hash:</span> aeec068c58e1e78f0fb6 <span class="hljs-label" style="box-sizing: border-box;">Version:</span> webpack <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.12</span><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">.9</span> <span class="hljs-label" style="box-sizing: border-box;">Time:</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">70</span>msAsset Size Chunks Chunk Names bundle<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.js</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.48</span> kB <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> [emitted] main[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] ./entry<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.js</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">87</span> bytes {<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>} [built]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li></li></ul>
node.js之打包工具webpack相关推荐
- 前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作 即在一个最终的js文件中引入其它的js文 ...
- 前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
- JS模块化 + 打包工具webpack5
「模块化」是思想 Summarize From [「前端工程化」之 Webpack 原理与实践(彻底搞懂吃透 Webpack)汪磊原版] 文章目录 ==模块化的演变过程== 文件划分方式(全靠约定) ...
- Node.js:NVM工具的使用 nvm常用命令
NVM: Node Version Manager Node.js的版本管理工具,可以实现多个node版本共存,并随意切换,就相当于python里面的pyenv 项目地址:https://github ...
- node js怎么进行打包发布linux,Node.js JXcore 打包
Node.js JXcore 打包 Node.js 是一个开放源代码.跨平台的.用于服务器端和网络应用的运行环境. JXcore 是一个支持多线程的 Node.js 发行版本,基本不需要对你现有的代码 ...
- Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块 使用 cnpm 命令 cnpm i webpack- ...
- 带你了解Node.js包管理工具:包与NPM
摘要:包与NPM Node组织了自身的核心模块,也使得第三方文件模块可以有序的编写和使用. 本文分享自华为云社区<NodeJs深入浅出之旅:包与NPM>,作者:空城机. 包与NPM Nod ...
- 五分钟学会前端打包工具webpack
可以做的事情 代码转换.文件优化.代码分割.模块合并.自动刷新.代码校验.自动发布 最终目的 webpack的基本配置 webpack的高级配置 webpack的优化策略 ast抽象语法树 webpa ...
- 浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
最新文章
- Selenium如何通过location和size定位元素坐标?
- mysql中的字符匹配查询
- 学完可以解决90%以上的数据分析问题-利用python进行数据分析第二版(代码和中文笔记)...
- 从运维的角度理解Iaas、Paas、Saas云计算
- mysql 树表查询所有子节点
- 关于bufferKnife8.8.1点击事件无效的原因
- 程序员谈谈我的职场观(三)
- 同事:别加班了,今天可是你们1024程序员节啊!
- HALCON 20.11:深度学习笔记(10)---分类
- java比较两个字符串变量_Java 比较两个字符串内容是否相等
- mysql原生sql语句_原生SQL语句
- paip.提高效率---微信 手机app快速开发平台—微网络撬动大市场
- 自己组装nas服务器万兆,万兆网络、装M.2 SSD的NAS服务器
- 什么是计算机技术作文500字,关于电脑的作文500字
- (27)Verilog实现倍频【方法四】
- python双下划线什么意思_python中_、__、__xx__(单下划线、双下划线等)的含义
- 04 使用three.js开发全景漫游 全景图切换的实现
- Cocos Creator 一步一步实现重力球游戏
- 发表SCI或EI类英文文章的一些投稿经验
- Java、对数列求和
热门文章
- Spring Cloud微服务实战(五)-应用通信
- Polemo Chat客户端行为
- 《C语言编程魔法书:基于C11标准》——1.3 主流C语言编译器介绍
- 【一起学OpenFOAM】04 OpenFOAM的学习资源
- 在linux系统上使用jmeter
- [高中作文赏析]相约
- Android 自定义View消除锯齿实现图片旋转,添加边框及文字说明
- PHP超级配置模块--PHP4,PHP5,module,cgi任你玩转--应用于Apache
- java栈的实现_栈的实现(Java)
- python123作业怎么提交_python分析作业提交情况