webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文，旨在给予想要学习webpack的小伙伴一个另外的途径。如有不当之处，请大家指出。
看完入门教程系列后，你将会学习到如下内容：
1.如何安装webpack
2.如何使用webpack
3.如何使用loaders
4.如何使用开发服务器
话不多说，马上开启我们的webpack之旅......
一、安装webpack(依赖nodeJs环境，nodejs环境的搭建不在此赘述)
npm install webpack -g
二、 Hello Wepack
1. 创建一个空的文件夹，新建entry.js文件。
document.write("Hello webpack.");
2. 新建index.html文件。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
3. 在当前文件夹打开命令行，执行webpack ./entry.js bundle.js。执行后，webpack会编译entry.js并生成bundle.js文件。成功的话，会打印出如下类似信息。
Version: webpack 1.12.11
Time: 51ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]
4. 使用浏览器打开index.html，将会看到"Hello webpack"。
5. 接下来，我们将部分代码移动至另一个文件。新建content.js文件。
module.exports = "Hello webpack, it works from content.js.";
6. 更新entry.js为
+ document.write(require("./content.js"));
7. 然后再次执行webpack ./entry.js bundle.js，刷新浏览器窗口将会看到显示出"Hello webpack, It works from content.js"。
(webpack会分析你的入口文件所依赖的文件，这些文件(称作modules)同样会被包含到bundle.js中。webpack会给每一个modules一个唯一的id，并且在bundle.js中可以通过id来访问modules。
只有enrty module会在启动时执行。另外可以通过require函数引用其他modules，并在需要时执行依赖关系。)
8. 上述步骤中我们学习了使用webpack来编译js文件以及如何在一个js文件中引用另一个module。
webpack入门教程之Hello webpack(一)的更多相关文章
- HealthKit开发快速入门教程之HealthKit数据的操作
HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道 ...
- HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...
- HealthKit开发快速入门教程之HealthKit开发概述简介
HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...
- nodejs入门教程之http的get和request简介及应用
nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块 ...
- webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...
- github 入门教程之 github 访问速度太慢怎么办
github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...
- C++入门教程之二：变量
C++入门教程之二:变量 变量,顾名思义,意思是变化的量.变量的定义是计算机语言中能储存计算结果或能表示值的抽象概念.一个基本的程序需要变量,因此变量是程序设计中的一大重点. 变量基本结构 var_t ...
- webpack入门指南（基于webpack v4.41.2）
2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...
- webpack入门（三）webpack的api
终于到了webpack api这一篇,我都等不及了0.0; webpack is fed a configuration object. Depending on your usage of webp ...
随机推荐
- 谈谈如何使用Netty开发实现高性能的RPC服务器
RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络,从远程计算机程序上请求服务,而不必了解底层网络技术的协议.说的再直白一点,就是客户端在不必知道 ...
- C# 中参数验证方式的演变
一般在写方法的时候,第一步就是进行参数验证,这也体现了编码者的细心和缜密,但是在很多时候这个过程很枯燥和乏味,比如在拿到一个API设计文档的时候,通常会规定类型参数是否允许为空,如果是字符可能有长度限 ...
- ABP文档 - 后台作业和工作者
文档目录 本节内容: 简介 后台作业 关于作业持久化 创建一个后台作业 在队列里添加一个新作业 默认的后台作业管理器 后台作业存储 配置 禁用作业执行 Hangfire 集成 后台工作者 创建一个后台 ...
- Jquery 搭配 css 使用，简单有效
前几篇博客中讲了Jquery的基础和点击实际,下面来说一下和css搭配着来怎么做 还是和往常一样,举个例子 好几个方块,然后设置颜色 <!DOCTYPE html PUBLIC "-/ ...
- Android笔记——Button点击事件几种写法
Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...
- 手动添加kdump
背景: Linux嵌入式设备内核挂死后,无法自动重启,需要手动重启.而且如果当时没有连串口的话,就无法记录内核挂死时的堆栈,所以需要添加一种方式来记录内核挂死信息方便以后调试使用.设备中增加k ...
- 【开源】.Net 分布式服务中心
分布式服务中心 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ServiceCenter 当垂直应用越来越多,应用之间交互不可避免,将 ...
- 6_Win7下Chrome主页被流氓网站hao123.com劫持后的解决方法。
今天安装了一个PDF阅读器,免费的,你懂的,结果自己安装的时候没有将默认的选项取消,就被hao123流氓网站劫持啦. 说实话某免费PDF阅读器还算好的,有一个可以供你选择的项.不想某些软件直接就默认选 ...
- Java 进阶 hello world! - 中级程序员之路
Java 进阶 hello world! - 中级程序员之路 Java是一种跨平台的语言,号称:"一次编写,到处运行",在世界编程语言排行榜中稳居第二名(TIOBE index). ...
- Linux实战教学笔记04:Linux命令基础
第四节:Linux命令基础 标签(空格分隔):Linux实战教学笔记 第1章 认识操作环境 root:当前登陆的用户名 @分隔符 chensiqi:主机名 -:当前路径位置 用户的提示符 1.1 Li ...