过去数年间，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 相关基础笔记

    html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...

  2. PCI Express(三) - A story of packets, stack and network

    原文出处:http://www.fpga4fun.com/PCI-Express3.html Packetized transactions PCI express is a serial bus. ...

  3. C++温习

    string abc; cin >> abc; cin把 空格,制表符,换行符作为终止符,用于提取一个词.如果在abc串中输入的内容是有空格的,流中的内容会被打乱? getline (ci ...

  4. PHP递归实现层级树状展现数据

    树状数据展现很常用,今天学习了PHP的递归,也来总结总结! PHP代码: function _getTreeList_custom1($data,$parent_id,$depth) { $retur ...

  5. 自动生成form Scripts

    运行脚本: begin xxx_plsql_generator_pkg2.form_view_iud_p(p_block_name =>'CONTRACT_T' ,p_table_name =& ...

  6. 京东B2B的4种供销模式

    B2B的4种供销模式,以京东商城为例: FBP     京东给商家一个独立操作的后台, 商家五地入库(北京,上海,广州,成都,武汉),从仓储 到配送 到客服都是京东来操作, 京东本身自营的产品所有能享 ...

  7. keyup keydown keypress 区别

    测试的浏览器环境: chrome 版本 43.0.2357.134 mfirefox 版本 24.0IE6(绿色版 IE.exe)IE7IE8IE9 搜狗拼音输入法3.5(3.5.0.1089)网吧专 ...

  8. 关于 NPOI 报 Invalid column index (256). Allowable column range for BIFF8 is (0..255) or ('A'..'IV') 错误的解决办法

    当看到这个错误的时候,网上搜索可以会有些说列数有限制之类的说法,这个说法是相对于 Office 2003 的,在 Office 2007 之前,最多只可以创建  列:在 Office 2007 之后, ...

  9. mac安装Mysql官方示例数据库employee

    1. 下载地址 https://launchpad.net/test-db/employees-db-1/1.0.6 2. 执行命令 /usr/local/mysql/bin/mysql -t -u ...

  10. access数据库连接问题

    使用Visual Studio连接access数据库(数据库后缀.accdb)时连接不上(access数据库提示未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序)解决办 ...