过去数年间，web开发已经从包含少量JavaScript代码的应用发展到到拥有复杂JavaScript代码和代码之间依赖关系树的应用。手动维护这些复杂的代码依赖关系是很麻烦的。Webpack能分析项目的结构，找到JavsScript模块和其他Assets，然后收集打包给浏览器使用，使开发人员可以减少维护代码的成本。来看一个简单的Webpack使用例子。

1、工具安装和环境配置

首先要安装npm，直接安装Node.js就可以了。然后使用npm install -g webpack全局安装，或者在对应的工程目录下本地安装。接下来我们创建一个工程目录，比如sample1。然后创建两个目录app和public。app目录下创建两个文件Greeter.js和main.js，public目录下放置一个index.html文件。然后执行npm init命令，创建package.json文件。如果没有全局安装webpack，还要使用npm install webpack命令，目录下会多出一个node_modules目录。

2、代码实现

Greeter.js和main.js代码实现如下：

//main.js

var greeter = require('./Greeter.js');

document.getElementById('root').appendChild(greeter());

//Greeter.js

module.exports = function() {

    var greet = document.createElement('div');

    greet.textContent = "Hi there and greetings!";

    return greet;

};

index.html实现如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Webpack Sample Project</title>

    <head>

    <body>

        <div id="root"></div>

        <script src="bundle.js"></script>

    <body>

<html>

注意到我们使用了bundle.js这个文件，我们将在第三步中使用webpack生成这个文件。

3、使用Webpack打包

接下来我们使用webpack app/main.js public/bundle.js生成bundle.js文件。我们只需要告诉webpack主文件是main.js，webpack就会找到所有使用的依赖文件，将所有文件一起打包处理。

然后用浏览器打开index.html文件，就可以看到Hi there and greetings!语句了。

Webpack使用教程一的更多相关文章

  1. CRL快速开发框架系列教程一(Code First数据表不需再关心)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  2. NGUI系列教程一

    NGUI是Unity的一个插件,使用它来制作你的游戏UI必定将事半功倍.为什么这么说呢?首先我们说说GUI与NGUI的区别,GUI是Unity自带的绘制界面工具,它的成像原理是基于表层的,所以执行效率 ...

  3. Quartz教程一：使用quartz

    原文链接 | 译文链接 | 翻译:nkcoder | 校对:方腾飞 本系列教程由quartz-2.2.x官方文档翻译.整理而来,希望给同样对quartz感兴趣的朋友一些参考和帮助,有任何不当或错误之处 ...

  4. redis学习教程一《Redis的安装和配置》

    redis学习教程一<Redis的安装和配置> Redis的优点 以下是Redis的一些优点. 异常快 - Redis非常快,每秒可执行大约110000次的设置(SET)操作,每秒大约可执 ...

  5. Cobalt Strike使用教程一

    Cobalt Strike使用教程一     0x00 简介 Cobalt Strike是一款基于java的渗透测试神器,常被业界人称为CS神器.自3.0以后已经不在使用Metasploit框架而作为 ...

  6. Webpack教程一

    比较 如果你熟悉原来一系列的构建工具,grunt或者gulp之类的,这里有一篇webpack和他们比较的文章可以读一读. Webpack Compared 安装 先装好node和npm,因为webpa ...

  7. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  8. nodejs服务器部署教程一

    第一篇教程紧紧让你输出一个hello world 环境介绍 服务器环境:ubuntu(16.04)64位 本地环境:windows10 64位 连接工具:mobaxterm ubuntu安装和基本配置 ...

  9. Activiti5.10简易教程一

    Activiti5.10简易教程一 一搭建环境 1.1   JDK 6+ activiti 运行在版本 6 以上的 JDK 上.转到 Oracle Java SE 下载页面,点击按钮“下载 JDK ” ...

随机推荐

  1. Linux网络状态工具ss命令使用详解

    ss命令用于显示socket状态. 他可以显示PACKET sockets, TCP sockets, UDP sockets, DCCP sockets, RAW sockets, Unix dom ...

  2. ajax XML

    <script src="jquery-1.11.2.min.js"></script> </head> <body> <se ...

  3. C语言中的union

    1.union中可以定义多个成员,union的大小由最大的成员的大小决定. 2.union成员共享同一块大小的内存,一次只能使用其中的一个成员,与struct形成鲜明对比. 3.对某一个成员赋值,会覆 ...

  4. php函数的引用返回

    <?php function &test(){ static $b = 1; $b += 2; return $b; } $a = &test(); $a =8; $c = te ...

  5. 查看某个线程占得CPU高

    jps得到pid pidstat -p [pid] -t 1 5        -t表示显示该进程里面所有的线程的信息 06:20:32 PM      TGID       TID    %usr ...

  6. BootLoader 详解（2）

    BootLoader的stage1 1.基本的硬件初始化 这是BootLoader一开始就执行的操作,其目的是为stage2的执行以及随后的kernel的执行准备好一些基本的硬件环境.它通 常包括以下 ...

  7. asp.net GDI+绘制矩形渐变

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. ssh 互通脚本

    实现了 主机到指定机器的ssh免密码登录. 若要实现互通, 则在机器列表的每台机器上执行该脚本. 192.168.1.22 root test 192.168.1.25 root test 192.1 ...

  9. Ubuntu下搭建Android编译环境

    Ubuntu一台新机器的一些环境搭建新增一个3TB的硬盘,挂载方法,大于2TB的得parted来进行分区1: sudo parted /dev/sda2: mklabel gpt3: unit TB4 ...

  10. Selenium2+python自动化25-js处理日历控件（修改readonly属性）

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...