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文件,输入以下内容:
<html><div id="app"></div><script src="./dist/bundle.js"></script></html>
从源代码看出,这个html引用了一个webpack打包之后生成的输出文件。
既然是模块化开发,我们就新建一个模块,实现文件放在print.js里:
function print(content){window.document.getElementById("app").innerText = "Hello," + content;}module.exports = print;
这个模块就实现了一个print函数,把传入的字符串显示在index.html的id为app的div标签里。
有了module后,我们还需要执行这个module。为此,新建一个main.js文件,输入下列内容:
const print = require("./print.js");print("Jerry");
最后,我们得生成index.html使用到的bundle.js文件。为此,我们要给webpack定义一个任务,通过新建文件webpack.config.js完成。
entry字段定义了webpack的输入:main.js, 输出则放在当前目录dist下面的bundle.js里。
const path = require("path");module.exports = {entry: "./main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./dist"),},mode: 'development' // 设置mode};
至此,webpack_demo文件夹下的资料看起来是这样的:
执行命令行webpack:
执行完webpack后,打开index.html, 看到了我们期望中的Hello Jerry:
至此,一个最简单的webpack例子就跑通了。
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Webpack 10分钟入门相关推荐
- 教程 | 10分钟入门简笔画(哆啦A梦篇)
多啦A梦主题曲 - 腾讯视频 从小就喜欢小叮当这个形象,不知道为什么后来改成了多啦A梦. 多啦A梦之歌,时常萦绕在耳旁: 心中有许多愿望,能够实现有多棒,只有哆啦a梦可以带着我实现梦想 可爱圆圆胖脸庞 ...
- 10分钟入门 ANSA API
扫描下方二维码关注我的微信公众号 - CAE软件二次开发Lab阅读全文! 文章目录 10分钟入门 ANSA API Script Editor (脚本编辑器) Modules(模块) 在ANSA中 ...
- 微信小程序怎么在wxml中插入多个图片_白云工商带你10分钟入门微信小程序开发...
10分钟入门微信小程序开发 程序开发难吗? No!来白云工商带你10分钟入门微信小程序开发! 英语不好能学好程序开发吗? 当然能,程序开发常见的也就那几个单词,只要热爱,非常简单! 欣赏 首先,来欣赏 ...
- 教程 | 10分钟入门简笔画(彩色小插画)
你好,色彩. BY:铃铛子 马克笔的笔触感觉: BY:铃铛子 由于大家写字的时候,为了笔锋,会起笔停顿一下,落笔再停顿一下,但是运行马克笔的时候不要这样,起笔确定了就画线,落笔除非必要,否则不停顿. ...
- 教程 | 10分钟入门简笔画12(创意小插画)
我的一家 很多宝宝说想学创作,今天跟大家分享简笔画中的联想小插画. 所谓联想小插画,就是想到哪里画到哪里.首先确定一个主题,抓住主要元素,然后用装饰性字体.元素.花边来丰富画面.我尝试创作了一张My ...
- 教程 | 10分钟入门禅绕画 3
禅绕装饰画是一种意识流装饰画,也是一种有趣随性的涂鸦,笔触可以天马星空随意走动. 禅绕画的构图技巧:重复.对称.均衡.重叠.勾线.肌理等.所有技巧的组合可以使得画面节奏和谐.疏密有度.节奏韵律恰如其分 ...
- 10分钟入门Pandas(添加一些个人见解)
pandas十分钟入门(codedog翻译) 原文下载地址:https://download.csdn.net/download/qq_35189715/11392455 github地址:https ...
- SQL人的优势:实战大数据开发10分钟入门
金色的九月,即将开启收获的篇章. 一早醒来,魔都湛蓝的天空,暑气未消的阳光,一扫前几日狂风暴雨的阴霾.品着自己煮的咖啡,吃上一口朱家角寄来的苏荷月饼,人生真赞! 这个礼拜将32G内存和M.2 SSD都 ...
- 教程 | 10分钟入门简笔画 11(简笔小插画入门)
小插画的运用十分广泛,POP.手账中都可以运用到. 今天跟宝宝们分享几个入门级别的小插画.也许有人会提倡小插画直接动笔就画,但是我个人觉得为了最后的成品有保障,在不确定的地方可以定一下位,当然主体上还 ...
最新文章
- Linux(9)用户、组和权限管理
- 电脑常见故障处理_关于密封仪、密封试验仪器在使用上的常见故障及维护方面...
- 数据挖掘:基于TF-IDF算法的数据集选取优化
- go mysql存储过程_Golang 调用MySQL存储过程
- 《Linux设备驱动程序》学习2—高级字符设备驱动ioctl
- Java B2B2C多用户商城 springcloud架构- 企业云架构common-service代码结构分析(六)...
- git-比对不同-diff
- Java 10新特性
- java + testng wsdl 测试_在测试中使用XPATH断言的策略
- 19-linux下ElasticSearch.6.2.1与head、Kibana、X-Pack、SQL、IK、PINYIN插件的配置安装
- python对象列表转换为字典_python实现class对象转换成json/字典的方法
- linux cp 强行覆盖
- 两个pv挂一个vg_王者荣耀2020世冠杯小组赛全部结束,TS和AG、QG和E星一个半区
- linux锐捷认证成功无法上网,如何修复win7系统锐捷认证成功但是却无法上网的操作教程...
- 通过Windows的bat方式一键给计算机网卡替换IP地址
- 基于go语言的牛牛游戏服务器搭建
- 集成开源技术的性能监控平台
- 超融合服务器系统,超融合服务器|超融合架构|超融合一体机|业务系统一体机
- 帝国php改密码后登录不进去,帝国CMS安装,后台,登陆,密码常见问题汇总
- Spring Admin 入门
热门文章
- 期货与期权(part9)--交易员类型和交易指令类型
- python参数化_Python 中如何实现参数化测试的方法示例
- SAP UI5 应用读取 CSRF token 的 HTTP head 请求逻辑解析
- SAP 电商云 Spartacus UI Component 级别的延迟加载实现(Lazy Load)
- SAP ABAP Development Tool 提高开发效率的十个小技巧
- SAP UI5 使用 Smart Control 的一个具体例子
- 程序员自我修养的4个阶段
- Angular单元测试里pipe的mock设计
- SAP Spartacus的ComponentFactory和ComponentFactoryResolver - 动态添加outlet
- 如何使用SAP Analytics Cloud统计C4C系统每天新建的Lead个数和预测趋势