过去数年间，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 ToolChain (二) --- Linker (1)链接选项 -L -rpath -rpath-link

    一.动态库的链接和链接选项-L,-rpath-link,-rpath (1). 现代连接器在处理动态库时将链接时路径(Link-time path)和运行时路径(Run-time path)分开, 用 ...

  2. No.014 Longest Common Prefix

    14. Longest Common Prefix Total Accepted: 112204 Total Submissions: 385070 Difficulty: Easy Write a ...

  3. memcache c++使用

    memcache作为一个内存数据库,快速查询的功能. 在c++下面使用memcache需要一个memcache client.c++版本的是libmemcached http://libmemcach ...

  4. css固定div头部不随滚动条滚动

    给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;

  5. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  6. 二维数组去除重复值和array_unique函数

    今天遇到了一个问题,就是从数据库中去除的数组为一个二维数组,现在就是想将二位数组进行去重,但是在php中,对于一个一维数组,我们可以直接使用php的系统函数array_unique,但是这个函数不能对 ...

  7. C#之Winform中treeview控件绑定数据库

    private DataSet ds; private SqlDataAdapter sqlDataAdapter1; private int maxnodeid; private void Form ...

  8. DCOM中的APPID的用处，以及RemoteServerName的传递问题

      DCOM中的APPID的用处,以及RemoteServerName的传递问题  

  9. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

  10. 6.Mybatis中的动态Sql和Sql片段（Mybatis的一个核心）

    动态Sql是Mybatis的核心,就是对我们的sql语句进行灵活的操作,他可以通过表达式,对sql语句进行判断,然后对其进行灵活的拼接和组装.可以简单的说成Mybatis中可以动态去的判断需不需要某些 ...