webpack 使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:

<!-- index.html -->
<html>
<head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html> 
// entry.js
document.write('It works.')

然后编译 entry.js 并打包到 bundle.js:

$ webpack entry.js bundle.js

打包过程会显示日志:

Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54msAsset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main[0] ./entry.js 27 bytes {0} [built]

用浏览器打开 index.html 将会看到 It works. 。

接下来添加一个模块 module.js 并修改入口 entry.js

// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块 

重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63msAsset     Size  Chunks             Chunk Names
bundle.js  1.57 kB       0  [emitted]  main[0] ./entry.js 66 bytes {0} [built][1] ./module.js 43 bytes {0} [built]

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

转载于:https://www.cnblogs.com/ExMan/p/6758481.html

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

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

相关文章

SpringCloud入门简述

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 1、微服务简述 ​ 微服务&#xff0c;是一个小型的服务&#xff0c;也是一种设计…

微软的创新还是败笔?Windows 8为苹果创造天赐良机

网络安全公司Avast近日公布的数据显示&#xff1a;Windows系统使用人数正在不断下降。这一结果对微软来说可谓噩梦&#xff0c;于此同时&#xff0c;苹果则不断加强市场占有率。又是什么导致了这样的结果&#xff1f;接下来就看看最主要的几点&#xff1a; 调查覆盖了13.5万Wi…

VMware ubuntu 上网

直接使用桥接模式吧&#xff0c;将虚拟机直接连接到外部网络。同样在Ubuntu里面设置网络ip&#xff0c;见上一篇文章转载于:https://blog.51cto.com/vincent1992/1591102

【转】做好性能测试的6个关注点

一、性能测试提前准备关注点 1、性能测试的环境配置需要能够尽可能的模拟版本的现场使用&#xff0c;包括外网的设备&#xff0c;软件网元&#xff0c;各种硬件平台&#xff0c;操作系统&#xff0c;软件平台&#xff1b; 2、性能测试需要准备合适的模拟脚本来尽可能全真的模拟…

testbench常用任务之SPI slave输出数据

模仿了SPI master从SPI slave读取数据的MiSO数据状态 每8个clk后读取的数据加1 用的一些额外寄存器需要自己声明和初始化 //------------------------------------------------------------------------- //send serial data which is increase by 1 on MiSO line //----------…

大坑!有网,电脑qq登不上去!!

手机qq --> 设置 --> 账号设备安全 --> 允许手机电脑同步在线 或是其他设置干扰导致转载于:https://www.cnblogs.com/supy/p/6762518.html

Vue生产环境调试的方法

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 vue 生产环境默认是无法启用vue devtools的&#xff0c;如果生产应用出了问题&…

RavenDB:基于Windows/.NET平台的NoSQL数据库

众所周知&#xff0c;NoSQL运动旨在成为大数据时代传统关系数据库管理系统的替代品。如今Microsoft对开源的态度有所转变&#xff0c;RavenDB就是很好的例子。Microsoft对RavenDB&#xff08;NoSQL数据库&#xff09;的认可令很多人感到惊讶。RavenDB可以轻易的替代关系数据库管…

JDBC实例--JDBC连接池技术解密,连接池对我们不再陌生

一、为什么我们要用连接池技术&#xff1f; 前面的数据库连接的建立及关闭资源的方法有些缺陷。统舱传统数据库访问方式&#xff1a;一次数据库访问对应一个物理连接,每次操作数据库都要打开、关闭该物理连接, 系统性能严重受损。 解决方案&#xff1a;数据库连接池&#xff08…

重温51汇编指令(附实验)

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 重温51汇编指令&#xff08;附实验&#xff09; 写在前面&#xff1a; 在电子控制…

第四章 C++数据类型

#include#includeusing std::cout;using std::cin;using namespace std;int main(){ // int a; //布尔 bool check; check0;//初始化为false check true; //字符 char ch; ch0; cout<< ch <<endl; cout<<(int)ch<<endl; for(int i32;i<128;i) { …

HttpClient 学习整理(转)

来自 http://www.blogjava.net/Alpha/archive/2007/01/22/95216.htmlHttpClient 是我最近想研究的东西&#xff0c;以前想过的一些应用没能有很好的实现&#xff0c;发现这个开源项目之后就有点眉目了&#xff0c;令人头痛的cookie问题还是有办法解决滴。在网上整理了一些东西&…

Hyperledger Fabric 通道配置文件和容器环境变量详解

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 摘要 Fabric 网络启动的过程中需要进行大量配置&#xff0c;新学时对各个配置的作…

课程作业二

课程作业二 github链接 题目要求&#xff1a; 编写一个程序&#xff0c;要求计算给定的圆的半径求圆的面积&#xff0c;并将所结果打印出来。需要建立一个工程&#xff0c;将程序写为两个.cpp与一个.h文件。 文件分离的感想&#xff1a; 对于本次作业&#xff0c;是一道我们平时…

SSH HTTPS 公钥、秘钥、对称加密、非对称加密、 总结理解

2019独角兽企业重金招聘Python工程师标准>>> 作者&#xff1a;shede333主页&#xff1a;http://my.oschina.net/shede333 && http://blog.sina.com.cn/u/1509658847版权声明&#xff1a;原创文章&#xff0c;版权声明&#xff1a;自由转载-非商用-非衍生-保…

windows下wamp安装

1.apache安装 php模块添加&#xff1a;LoadModel php5_module D:/wamp/php/php5apache2_2.dll 然后搜索“addtype”&#xff0c;在下方加入 AddType application/x-httpd-php .php 这句话&#xff0c;以使你的服务器能够识别php文件。 2.php安装 php.ini 打开mysql扩展 3.mysql…

图说Oracle基础知识

http://www.cnblogs.com/hsiang/ 本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但未经作者同意必须保留此段声明&#xff0c;且在文章页面明显位置给出原文连接&#xff0c;谢谢。转载于:https://www.cnblogs.com/zbj815/p/6773508.html

petite-vue源码剖析-逐行解读@vue-reactivity之effect

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 当我们通过effect将副函数向响应上下文注册后&#xff0c;副作用函数内访问响应式对…

string.Format 格式化

1、格式化货币&#xff08;跟系统的环境有关&#xff0c;中文系统默认格式化人民币&#xff0c;英文系统格式化美元&#xff09; string.Format("{0:C}",0.2) 结果为&#xff1a;&#xffe5;0.20 &#xff08;英文操作系统结果&#xff1a;$0.20&#xff09; 默认格…

8步教你打开Android之门 NDK入门教程

这是一篇Android NDK开发的入门教程&#xff0c;在这一教程结束后&#xff0c;你将创建你自己的项目&#xff0c;从Java代码简单地调用原生C语言代码。 本文为一篇外文翻译&#xff0c;我们将介绍如何学习安装 Android NDK 并开始使用它。在这一教程结束后&#xff0c;你将创建…