webpack的簡單使用實現倒計時
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文件即可。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。