webpack的简单使用实现倒计时

最新推荐文章于 2022-11-21 11:21:39 发布

花开花又谢

最新推荐文章于 2022-11-21 11:21:39 发布

阅读量765

点赞数 1

分类专栏： webpack

本文链接：https://blog.csdn.net/u010730897/article/details/72236264

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

花开花又谢

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的简单使用实现倒计时

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。对于webpack的使用我们大多数时间都是在项目中去生成使用，比如angular、vue等，但是对它了解甚少，下面我们就对webpack的使用做一个简单的介绍。第一步：全局安装webpack安装webpack必然首先需要有nodejs环境，有了环境之后执行npm install
复制链接

扫一扫