Webpack 10分钟入门-阿里云开发者社区

开发者社区> 开发者小助手-bz5> 正文

Webpack 10分钟入门

简介: Webpack 10分钟入门
+关注继续查看

可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。




WebPack可以看做是一个模块加工器,如上图所示。它做的事情是,接受一些输入,经过加工产生一些输出。


输入是我们web前端项目的模块文件,通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。


输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文件。比如ES6的js转成ES5的js,CSS预处理器文件转成CSS文件等等。


我们来动手做一个具体的例子。这个例子只花费10分钟时间,就能让我们熟悉webpack的基本用法。


1. 新建一个文件夹,首先用npm init命令创建一个package.json:



在下面使用命令行npm install --save-dev webpack,安装webpack并保存到项目的package.json的devDependencies下面。


花了一分钟才执行完毕。



执行完毕后,检查package.json, 发现webpack出现在devDependencies区域里。



此时项目文件夹层次结构如下图:



2. 新建一个index.html文件,输入以下内容:

image.png

从源代码看出,这个html引用了一个webpack打包之后生成的输出文件。

既然是模块化开发,我们就新建一个模块,实现文件放在print.js里:image.png

这个模块就实现了一个print函数,把传入的字符串显示在index.html的id为app的div标签里。

有了module后,我们还需要执行这个module。为此,新建一个main.js文件,输入下列内容:image.png

最后,我们得生成index.html使用到的bundle.js文件。为此,我们要给webpack定义一个任务,通过新建文件webpack.config.js完成。

entry字段定义了webpack的输入:main.js, 输出则放在当前目录dist下面的bundle.js里。image.png

至此,webpack_demo文件夹下的资料看起来是这样的:


执行命令行webpack:


执行完webpack后,打开index.html, 看到了我们期望中的Hello Jerry:


至此,一个最简单的webpack例子就跑通了。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
转:在MyEclipse下创建Java Web项目 入门(图文并茂)经典教程
本文是一篇在Myeclipse下构建Java Web项目的初级教程。图文并茂,非常详细。所用的Myeclipse版本是7.5。   第一步:新建Web Project,如下图。   第二步,在弹出的窗口填写下面内容。
902 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9963 0
带你读《Python Flask Web开发入门与项目实战》之三:Jinja 2模板引擎
本书从Flask框架的基础知识讲起,逐步深入到使用Flask进行Web应用开发实战。内容通俗易懂,案例丰富,实用性强,特别适合Python Web开发的入门读者和进阶读者学习,也适合PHP程序员和Java程序员等其他Web开发爱好者阅读。另外,本书可以作为相关培训机构的教材用书。
1030 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10878 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13719 0
ASP.NET Web API 2 入门教程
译者:jiankunking 出处:http://blog.csdn.net/jiankunking 源码下载 HTTP不仅提供web页面服务,在构建公开服务和数据api方面,它也是一个强大的平台。HTTP简单、灵活、无处不在。几乎你能想到的所有的平台,都有一个HTTP库,因此HTTP服务可以影响到广泛的客户端,包括浏览器、移动设备,和传统的桌面应用程序。 AS
2227 0
[java web 入门](一)MyEclipse & HelloWorld 记录
第一部,下载安装MyEclipse for mac.    http://downloads.myeclipseide.com/downloads/products/eworkbench/2014/installers/myeclipse-spring-2014-GA-offline-installer-macosx.
918 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载