过去数年间，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. flask一些资料

    http://shulhi.com/celery-integration-with-flask/ https://jeffknupp.com/blog/2014/01/29/productionizi ...

  2. 深入理解JS异步编程四（HTML5 Web Worker）

    >Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker We ...

  3. C# 或 Asp.net 2.0 邮件发送模块（亲测）

    using System.Net.Mail;using System.Net; public class Mail    {        MailMessage mm;        SmtpCli ...

  4. web form 控件

    webform的简单控件1.Label:文本显示,编译后是span属性:颜色,样式,边线宽度2.Literal:纯文本显示,编译后是text 3.TextBox:文本框TextMode-密码框.文本域 ...

  5. sql基础知识（新手必备）

    一.简单查询 1.查询所有数据,查询部分列数据,列别名 SELECT * FROM 表名 SELECT 列1 AS 'BIAOTI1','BIAOTI2'=列2  FROM 表名 2.查询不重复的数据 ...

  6. C#连接数据库的四种方法

    在进行以下连接数据库之前,请先在本地安装好Oracle Client,同时本次测试System.Data的版本为:2.0.0.0. 在安装Oracle Client上请注意,如果OS是3-BIT请安装 ...

  7. Lua __index元方法

    [Lua __index元方法] 当你通过键来访问 table 的时候,如果这个键没有值,那么Lua就会寻找该table的metatable(假定有metatable)中的__index 键.如果__ ...

  8. 把 TBytes 转换为十六进制字符串

    function BytestoHexString(ABytes: TBytes; len: Integer): AnsiString; begin   SetLength(Result, len*) ...

  9. CoreData创建

    云盘-->CoreData文件 一 创建表打开点击增加的Entity名字应该与 EntityForName一致   二 创建NSManageObject SubClass   三 拖进CoreD ...

  10. 第三十四章 metrics（2）- 搭建metrics平台

    一.基本架构图 1.整个架构组件: java客户端 dropwizard-metrics:springboot.hystrix的metric体层使用了这个,所以我们需要自己封装向statsd发包的方法 ...