使用webpack打包js文件(隔行变色案例)

1.webpack安装的两种方式

  1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
  2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

2.初步使用webpack打包构建列表隔行变色案例

项目结构:

  1. 运行npm init -y 初始化项目，使用npm管理项目中的依赖包
  2. 创建项目基本的目录结构
  3. 使用npm i jquery -s安装jquery类库
  4. 创建main.js并书写隔行变色的代码逻辑：
// 导入jquery类库

import $ from 'jquery'

$(function () {

 // 设置奇数行背景色

    $('li:odd').css('background-color','lightblue')

     // 设置偶数行背景色，索引从0开始，0是偶数

    $('li:even').css('background-color',function () {

        return '#'+'F15A24'

    })

})
  1. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
  2. 运行webpack 入口文件路径 输出文件路径对main.js进行处理：
webpack src/js/main.js -o dist/bundle.js

注意如果提示没有webpack-cli,安装:

npm install webpack-cli -g

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Title</title>

    <style>

    </style>

    <!--注意不推荐在这里引入任何包和css文件-->

    <!--由于es6语法浏览器不识别 会报错-->

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

</head>

<body>

<ul>

    <li>这是第1个li</li>

    <li>这是第2个li</li>

    <li>这是第3个li</li>

    <li>这是第4个li</li>

    <li>这是第5个li</li>

    <li>这是第6个li</li>

    <li>这是第7个li</li>

    <li>这是第8个li</li>

    <li>这是第9个li</li>

    <li>这是第10个li</li>

</ul>

</body>

</html>

使用webpack打包js文件(隔行变色案例)的更多相关文章

  1. webpack打包js文件

    当输入 webpack 输入指令 npm run dev  后会自动启动一个浏览器 需要借鉴插件 open-browser-webpack-plugin 下载:npm install open-bro ...

  2. webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  3. webpack教程(二)——webpack.config.js文件

    首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...

  4. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

  5. webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  6. webpack——打包JS

    1.在文件中打开命令行,输入code ./    (我的编译器是vs code) 2.然后会弹出编译器,在编译器内新建js文件app,sum app.js import sum from './sum ...

  7. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  8. webpack打包js，css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  9. webpack 打包html文件

    webpack 打包html文件 webpack.config.js配置文件内容为: /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 ...

随机推荐

  1. C++之类和对象的使用（二）

    析构函数 析构函数的作用并不是删除对象,而是在撤销对象占用的内存之前完成一系列清理工作,使这部分内存可以被程序分配给新对象使用.对象生命周期结束,程序就自动执行析构函数来完成这些工作. 析构函数是一种 ...

  2. 推荐：普通UI设计师与顶级UI设计师的区别是什么？（转）

    我不是顶级设计师(我甚至不知道什么才叫顶级),即使见过的一些顶级(知名or优秀)设计师也因为交流不深入,无法评价.但是我勉强可以回答优秀的设计师,和普通的设计师(其实我觉得大部分的普通设计师只是认识他 ...

  3. Go语言的传参和传引用[转]

    目录[-] 传参和传引用的问题 传slice不是传引用! 什么叫传引用? 为什么传slice不是传引用? 为什么很多人误以为slice是传引用呢? 传指针和传引用是等价的吗? 所有类型的函数参数都是传 ...

  4. Scala中()与{}

    Scala中()与{}的关系 在Scala中有些时候()和{}是可以相互替换的,但是如果不弄清楚到底什么时候该用(),什么时候该用{},什么时候二者可以相互替换,那么在写代码的时候难免为出错,并且自己 ...

  5. 西邮Linux兴趣小组2014级免试挑战题 (续）

    在上一篇的博客中已经解到第四关了,现在继续挑战-- [ 第四关] 在上一关解压成功后,生成了一个file文件.用vim的二进制格式打开,转成十六进制,发现文件头格式如下: 是个以ELF字符开头的文件, ...

  6. sine

       

  7. Python学习-16.Python中的错误处理

    虽然叫错误,但跟 C# 中的异常是一回事.只不过 Python 中叫错误(Error)而 C# 中叫异常(Exception). 先手工产生一个异常: file = open('','r') 上面一句 ...

  8. 将Heap RID转换成RID格式

    使用DBCC PAGE命令查看索引叶子层中的索引键(最后一个参数为3才会显示索引键对应的HEAP RID)时,可以使用下面的SQL将HEAP RID转换成 FileId:PageId:SlotNo的格 ...

  9. leetcode 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  10. sql server 修改表字段信息

    alter table oa_archives_folder alter column folder_category varchar(200)