过去数年间，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. python之I/O多路复用

         python  IO多路复用 一.多路复用概念: 监听多个描述符(文件描述符(windows下暂不支持).网络描述符)的状态,如果描述符状态改变 则会被内核修改标志位,进而被进程获取进而进行 ...

  2. 使用NuGet Package Project快速制作NuGet包

    今天在visual studio gallery发现了一个插件NuGet Package Project,通过它可以在Visual Studio中建立Nuget Package工程,直接生成Nuget ...

  3. windows下Redis编译安装

    redis是现在比较流行的noSQL,主流大型网站都用的比较多,很多同学不知道怎么安装,这里介绍在windows下面安装以及扩展,提供学习使用,实际使用环境多在Linux下. 首先到相应网站下载red ...

  4. js中函数的定义

  5. servlet3.0，web.xml的metadata-complete的作用

    metadata-complete是servlet3.0规范中的新增的属性,该属性接受两个属性值,true或false.当该属性值为true时,该web应用将不会加载Annotation配置的web组 ...

  6. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  7. spring集成freemaker 制作短信模板

    1.配置configure的Bean,Bean中指定了模板文件的路径和刷新时间等配置. <!-- 配置freeMarkerConfigurer进行属性值的注入 --> <bean i ...

  8. php protobuff 使用

    http://hi.baidu.com/sing520/item/a6e98a3545fe1ef2e6bb7ad0 php 不支持uint32 不支持空结构 不支持package

  9. linux--杂记(rework)

    1.The mind behind Linux https://www.ted.com/talks/linus_torvalds_the_mind_behind_linux 2.Emacs ORG-M ...

  10. poj 3264 Balanced Lineup (RMQ)

    /******************************************************* 题目: Balanced Lineup(poj 3264) 链接: http://po ...