007 webpack基本的用法
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基本的用法的更多相关文章
- webpack中resolve用法
如果想在页面中使用 bootstrap 的样式,一般会在入口文件中引入 import 'bootstrap' 但是这样引入的 bootstrap 默认引入的是JS文件,所以页面的样式是不会生效的,下面 ...
- 脚手架vue-cli系列四：vue-cli工程webpack的基本用法
webpack的打包依赖于它的一个重要配置文件webpack.config.js,在这个配置文件中就可以指定所有在源代码编译过程中的工作了,就一个配置就可以与冗长的Gruntfile或者Gulpfil ...
- webpack进阶用法你都get到了么？
如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpa ...
- Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- webpack初试
前言: 知道这完儿,没用过.关于webpack有很多介绍了,就不多说了.放几个链接,方便新手理解.这是给纯没用过的人了解的.这里只是简单介绍一下webpack的基本用法.大多内容都是来自webpack ...
- webpack练手项目之easySlide（二）：代码分割（转）
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
- 了解webpack
学习笔记 一步步了解webpack 前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没 ...
- 学习笔记 一步步了解webpack
前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没有 grunt 那样丰富的配置和插件,但 ...
随机推荐
- mysql数据库创建、查看、修改、删除
一.创建数据库 使用默认字符集 不指定字符集时,mysql使用默字符集,从mysql8.0开始,默认字符集改为utf8mb4 ,创建数据库的命令为create database 数据库名称. #创建数 ...
- go语言笔记2
上接Go语言学习笔记(一) 11 Go错误处理11.1 nil函数通常在最后的返回值中返回错误信息.使用errors.New 可返回一个错误信息: package main ...
- Webmin<=1.920 RCE 漏洞复现
0x00 前言 本来前一阵就想复现来着,但是官网的版本已经更新了,直到今天才发现Docker上有环境,才进行了复现 0x01影响版本 Webmin<=1.920 0x02 环境搭建 dock ...
- ReqMan — 需求提取和协同处理工具
ReqMan是由德国engineering method AG公司开发的一款高效的.可自由定制的需求提取和协同处理工具.ReqMan 能够将PDF.Word.Excel等格式的文档提取 ...
- Django创建管理员账号
python manage.py createsuperuser 创建一个管理员账号 输入账号:admin 输入邮箱:123456789@qq.com 输入密码:test123456 二次确认 pyt ...
- tkinter改进了随机显示图片
随机显示,还加了圆圈,这样感觉更好点. from django.test import TestCase # Create your tests here. import random import ...
- win10下无法安装loadrunner，提示“管理员已阻止你运行此应用”
如下图: 1.再次进入控制面板,并且选择用户账户后把最下面的[更改用户账户控制设置],里面有个滑条,把滑条拉到最下面的[从不通知]上面并且确定. 2.按[Win+R]快捷键打开运行,输入 gpedit ...
- python笔记40-环境迁移freeze生成requirements.txt
前言 我们用python在本地电脑上开发完成一个python自动化项目用例,或者开发完成一个django项目. 需要部署到另外一台电脑或者服务器上的时候,需要导入python相关的依赖包,可以用fre ...
- P1941 飞扬的小鸟[dp]
题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣 ...
- keras神经网络开发知识笔记
mnist数据集获取60000个训练样本和10000个测试样本,样本为0-9十个数字,用全连接神经网络进行训练,并测试结果. 例程采用60000个数据样本进行训练,对于一般的电脑来说,这样训练会比较费 ...