webpack入门之简单例子跑起来
webpack介绍
Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。
webpack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。
webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。
开始使用webpack
Node.js是必备的工具,NPM的版本最好是3.x版本以上,NPM 3.x提供了更有效的包依赖管理。
webpack用npm安装。
//全局安装 npm install webpack -g //安装到你的项目目录 npm install webpack --save-dev
1.新建一个文件夹wkdemo,在该文件下 npm install webpack --save-dev
(看得出来应该先建一个package.json文件的(/ □ \))
2.package.json文件准备,可以使用npm init
命令自动创建这个package.json文件
3.webpack.config.js文件准备
4.index.html最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js),注意路径对应起来
由webpack.config.js文件中:
//页面入口文件配置entry: [// 'webpack/hot/only-dev-server',"./js/app.js"],
可以看出需要建一个文件js/app.js作为入口文件。
5.入口文件app.js准备
//app.js var greeter = require('./hello.js'); document.getElementById('root').appendChild(greeter());
可以看到这里引用一个同目录下hello.js文件
6.hello.js文件准备
// hello.js module.exports = function() {var greet = document.createElement('div');greet.textContent = "Hi there and greetings! hello world12345";return greet; };
7.执行webpack
8.运行index.html
最后看下目录结构为:
转载于:https://www.cnblogs.com/zhaodahai/p/6831434.html
webpack入门之简单例子跑起来相关推荐
- 转:Web Service入门开发简单例子--很详尽
.net平台内建了对Web Service的支持,包括Web Service的构建和使用.与其它开发平台不同,使用.net平台,你不需要其他的工具或者SDK就可以完成Web Service的开发了.. ...
- Webpack入门——使用Webpack打包Angular项目的一个例子
(一)什么是Webpack Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下 ...
- 前端自动化构建工具之webpack入门——简单入门
写在前面 这篇博客也是参照别人的webpack入门,加上自己的一些操作,还有我在此过程中遇到的困难.如果是已经入门的或者这方面的高手,请绕行,也请勿吐槽. 正文开始 我们为什么要学习webpack 首 ...
- ECSide入门简单例子(转fins)
ECSide是有一个基于jsp tag的开源列表组件. 简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签. 它的工作原理很简单. 您将要展现的列表的数据集合(Collection),放入r ...
- webpack入门--前端必备
什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 r ...
- VC API常用函数简单例子大全(1-89)
第一个:FindWindow根据窗口类名或窗口标题名来获得窗口的句柄,该函数返回窗口的句柄 函数的定义:HWND WINAPI FindWindow(LPCSTR lpClassName ,LPCST ...
- mysql入门很简单系列视频-学习笔记
mysql入门很简单系列视频-学习笔记 视频链接:mysql入门很简单系列视频 https://www.bilibili.com/video/av14920200/ 以前主要就了解DDL.DML.DC ...
- (三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由 博客园 首页 新随笔 联系 订阅 管理 随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
- webpack入门学习手记(一)
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
最新文章
- yum 安装服务出现报错收集
- AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11
- java并发之CAS
- mac下 如果docker 如果访问不到网 就下载哥docker-machine 然后进入到vbox下进行操作
- 关于spring 获取不到网站上的xsd的处理记录
- java immutable系列_Java Immutable类代码示例
- linux配置rsync服务器
- 竟然不是马云!第一个使用支付宝的人找到了 :受赠终身钻石会员
- SQL Server智能提示插件下载
- MyEclipse代码提示快捷键和常用设置
- pyqt 鼠标离开按钮_小米 Smart Pad 体验:表面它是个鼠标垫,其实还是个鼠标垫...
- 干货|软件测试简历的编写以及注意事项
- smail语法 详解
- OVER(PARTITION BY)使用方法
- 快速查询快递单号物流的方法有哪些?
- 0day漏洞是什么意思啊?
- 两个div并排 左边div宽固定 右边自适应
- 在SQL中char、nchar、varchar和nvarchar的区别
- 它们养活了一票国产软件!这些开源软件你知道吗
- java抑制警告快捷键_@SuppressWarning 抑制警告注解
热门文章
- 对于数据库进行设计在PHP,关于数据库表的设计
- java 图片 base64_java实现图片转base64字符串 java实现base64字符串转图片
- shell访问php文件夹,Shell获取某目录下所有文件夹的名称
- 计算机二级理工类报哪个,计算机二级考哪一科目,毕业后找工作会对科目有要求吗?还是说不管什么科目有证就行了?...
- oracle分页的使用,oracle中分页的实现方式.rownum的使用
- mysql 事务隔离规范_MySQL事务隔离级别以及脏读、幻读、不可重复读示例
- win10 动态磁盘 linux,win10系统动态磁盘改为基本磁盘的方法
- OpenCV中的姿势估计及3D效果(3D坐标轴,3D立方体)绘制
- Python Qt GUI设计:QLineEdit和QTextEdit文本框类(基础篇—13)
- Hololens2-Unity3D开发(一)