1.安装node.js

　　因为webpack是基于node.js的

　　

2.新建目录

　　

　　

3.需求

　　列表的隔行变色

4.初始化

　　在终端中使用npm init命令可以自动创建这个package.json文件

　　 npm init -y

　　

5.安装jquery

　　

6.安装webpack

　　cnpm install -g webpack

7.写main.js

// js的主要入口

import $ from 'jquery'

$(function(){

    $('li:odd').css('backgroundColor','blue')

    $('li:even').css('backgroundColor',function(){

        return '#'+'ab2'

    })

})

　　

8.修改权限

　　https://www.cnblogs.com/urwlcm/p/4333119.html

9.对main.js进行构建

　　webpack .\src\main.js -O .\dist\bundle.js

10.引用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../dist/main.js"></script>

</head>

<body>

    <ul>

        <li>1111111111</li>

        <li>2222222222</li>

        <li>3333333333</li>

    </ul>

</body>

</html>

　　

11.效果

　　

007 webpack基本的用法的更多相关文章

  1. webpack中resolve用法

    如果想在页面中使用 bootstrap 的样式,一般会在入口文件中引入 import 'bootstrap' 但是这样引入的 bootstrap 默认引入的是JS文件,所以页面的样式是不会生效的,下面 ...

  2. 脚手架vue-cli系列四：vue-cli工程webpack的基本用法

    webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfil ...

  3. webpack进阶用法你都get到了么？

    如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...

  4. Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法

    不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...

  5. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  6. webpack初试

    前言: 知道这完儿,没用过.关于webpack有很多介绍了,就不多说了.放几个链接,方便新手理解.这是给纯没用过的人了解的.这里只是简单介绍一下webpack的基本用法.大多内容都是来自webpack ...

  7. webpack练手项目之easySlide（二）：代码分割（转）

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  8. 了解webpack

    学习笔记 一步步了解webpack   前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没 ...

  9. 学习笔记 一步步了解webpack

    前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没有 grunt 那样丰富的配置和插件,但 ...

随机推荐

  1. 微信小程序转义解析渲染html

    今天开发小程序时,想调用商品详情字段,发现大部分是用编辑器编辑的html原生标签,无法在小程序直接使用. 后面自己使用正则和字符串替换,效果也不佳. 最后在网上找到了wx-mina-html-view ...

  2. Jenkins服务器的安装

    Jenkins服务器的安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装jdk 详情请参考:https://www.cnblogs.com/yinzhengjie/p/1 ...

  3. tkinter改进了随机显示图片

    随机显示,还加了圆圈,这样感觉更好点. from django.test import TestCase # Create your tests here. import random import ...

  4. 学习app开发思路

    1.首先在学习之前进行一次或者是整体或者是部分的检测,当第一次检测就通过,则可以认为是熟练掌握的东西(可以在后期对其进行验证是否是熟练)2.后面的学习过程,对回答的正确与否以及从第一次开始学习到目前为 ...

  5. Linux shell脚本基础学习详细介绍(完整版)一

    Linux shell脚本基础学习这里我们先来第一讲,介绍shell的语法基础,开头.注释.变量和 环境变量,向大家做一个基础的介绍,虽然不涉及具体东西,但是打好基础是以后学习轻松地前提.1. Lin ...

  6. nginx 配置文件正确性测试

    今日思语:每天都要不一样,那么每天就应该多学习 在安装完nginx之后,我们可以使用nginx的测试命令来验证下nginx.conf的配置是否正确: 方式一:不指定文件 nginx -t 如上可知/e ...

  7. [Web] About image: MozJPEG

    Image is quite heavy in web traffic. it is about 53% whole web traffic. It is important to make sure ...

  8. yolov1详细讲解

    前言 当我们谈起计算机视觉时,首先想到的就是图像分类,没错,图像分类是计算机视觉最基本的任务之一,但是在图像分类的基础上,还有更复杂和有意思的任务,如目标检测,物体定位,图像分割等,见图1所示.其中目 ...

  9. 洛谷 [USACO05DEC] 布局 题解

    今天学了差分约束系统, 这是一道板子题. 核心:a[v]>a[u]+d 相当于从u到v连一条长度为d的有向边.由于要判断有环,所以要从0点先跑一遍spfa因为1点不一定能到所有的点. #incl ...

  10. 2-移远GSM/GPRS M26 模块 Mini板 开发板(M26入门)

    https://www.cnblogs.com/yangfengwu/p/11214553.html 资料获取,首先说一下....很多东西需要自己悟,没有QQ群,没有微信群,论坛也寥寥无几!!!! 估 ...