webpack的简单使用实现倒计时
来源:互联网 发布:910九玩诛仙手游端口 编辑:程序博客网 时间:2024/06/05 11:17
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
对于webpack的使用我们大多数时间都是在项目中去生成使用,比如angular、vue等,但是对它了解甚少,下面我们就对webpack的使用做一个简单的介绍。
第一步:全局安装webpack
安装webpack必然首先需要有nodejs环境,有了环境之后执行
npm install -g webpack
进行webpack的安装。
第二步:新建web项目
新建一个项目,然后在项目中新建index.html(这是个结合css3动画实现的一个倒计时小demo)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 动画</title> <script src="bundle.js" type="text/javascript"></script></head><body><div class="interval">10</div></body><script> setInterval(function () { var interval = $(".interval").text(); if (parseInt(interval) < 1) { return; } else { var int = parseInt(interval); int--; $(".interval").text(int); } }, 1000)</script></html>
新建style.css样式文件
.interval { width: 200px; height: 200px; border-radius: 200px; text-align: center; vertical-align: middle; color: #ffffff; font-size: 10rem; background: #555555; animation: interval 1s; -webkit-animation: interval 1s; -moz-animation: interval 1s; -o-animation: interval 1s; animation-iteration-count: 10; /*动画循环次数*/ animation-timing-function: ease;}@keyframes interval { from { background: #555555; } to { background: #333333; }}@-webkit-keyframes interval { from { background: #555555; } to { background: #333333; }}@-moz-keyframes interval { from { background: #555555; } to { background: #333333; }}@-o-keyframes interval { from { background: #555555; } to { background: #333333; }}
注意 <script src="bundle.js" type="text/javascript"></script>
这里的引入文件是bundle.js,这里后面会提到。而且我们没有在index页面引入jquery和css文件。
第三步:完成入口文件
要使用webpack首先我们需要有一个入口文件,一个配置文件和一个打包后的文件。
我们先创建一个入口文件entry.js
require('!style-loader!css-loader!./style.css');require('expose-loader?$!jquery');
第一条用于引入样式文件,第二条用于引入jquery,并使用expose-loader将jquery的别名$暴露到全局。
这里用到的style-loader、css-loader、expose-loader以及没有用到的比如url-loader等都需要我们使用npm进行安装
npm install style-loader css-loader expose-loader url-loader
第四步:完成webpack配置文件
Webpack 在执行的时候,通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 –config 选项来指定配置文件。
/** * Created by ZhaoYing on 2017/5/15. */module.exports = { entry: './entry.js',//入口文件 output: { path: __dirname, filename: 'bundle.js'//webpack打包生成的js文件 }, module: { loaders: [ //样式加载器 {test: /\.css$/, loader: 'style-loader!css-loader'} ] }, resolve: { alias: { jquery: "./jquery.min.js"//引入jquery并给它一个别名jquery } }};
这样就配置好了,最终的项目结构如下
webpack
-node_modules
-entry.js
-index.html
-style.css
-webpack.config.js
-jquery.min.js
然后在项目目录下执行webpack,会在项目中生成一个bundle.js文件 。然后运行index.html文件即可。项目地址:https://github.com/DaiHuaXieHuaKai/webpack.git
- webpack的简单使用实现倒计时
- 使用CADisplayLink简单的实现倒计时
- 倒计时的简单实现
- android倒计时的简单实现
- 使用NSTimer计时器实现简单的按钮倒计时功能
- 一个简单的倒计时控件的实现
- webpack的简单使用(一)
- android倒计时的简单实现方法
- 简单的PHP实现倒计时方法
- 简单开始,暂停,继续的倒计时实现
- Android订单倒计时的简单实现
- Android---验证码倒计时的简单实现
- js发送短信倒计时的简单实现
- javascript实现简单的时间倒计时
- iOS开发 简单实现倒计时的方法
- Android倒计时类CountDownTimer的简单使用
- webpack简单使用
- webpack简单使用
- 【VS应用】 VS.net中快捷键收缩和展开代码段
- TestNG入门相关网站
- 排序算法之希尔排序的C++实现
- 位置和传感器:运动传感器
- php计算时间差,时间比较,时间计算
- webpack的简单使用实现倒计时
- CentOS7安装Scrapy和一些爬虫会用到的服务
- 加解密
- java实现循环单链表
- 闭包详解
- c# 弹出窗体选择文件代码
- android:screenOrientation属性
- 算法导论 红黑树的扩张 动态顺序统计
- iscsi简介和配置