Vue基础系统文章07---webpack安装和配置与打包
1、当前web开发困境
a.文件依赖关系错综复杂
b.静态资源请求效率低
c.模块化支持不友好
d.浏览器对高级js兼容性低
例如：模块代码实现隔行换色
1）在新建空白文件夹中运行：npm init -y 会初始化一个package.json文件
2）新建src文件夹，文件夹中建index.html
3) 运行：npm i jquery 安装jquery
4) 新建index.js文件，以模块化的方式引用jquery，并设置隔行换色，文件是这样的：
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li> </ul>
</body>
</html>
index.js文件
import $ from "jQuery"
$(function(){
$("li:odd").css("backgroundColor","pink");
$("li:even").css("backgroundColor","lightblue");
})
浏览器中运行，报错
要解决此问题，需要安装webpack
2、安装webpack,运行："
3、项目根目录下新建webpack.config.js文件，内容如下:
module.exports={
mode:'development'
}
4、在package.json 配置文件中的scripts节点下，新增dev脚本如下：
5、在终端运行：npm run dev 命令，启动webpack进行项目打包
再次打开index.html就可看到隔生换色的效果
Vue基础系统文章07---webpack安装和配置与打包的更多相关文章
- Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...
- day 84 Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置 1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...
- 从零开始搭建系统2.8——HDFS安装及配置
从零开始搭建系统2.8——HDFS安装及配置
- Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建
一 使用环境: windows 7 64位操作系统 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载 https: ...
- 从零开始安装搭建win10与ubuntu20.04双系统开发环境——集安装、配置、软件、美化、常见问题等于一体的——超详细教程
目录 **前言 ** 关于系统安装配置与软件安装 一.Win10安装ubuntu20.04双系统 1.按照自己的需求分区 2.配置软件镜像源 软件包管理工具介绍 更换APT源--使用国内镜像 3.解决 ...
- Mac OS X系统下利用VirtualBox安装和配置Windows XP虚拟机
准备工作 下载并安装VirtualBox for Mac到https://www.virtualbox.org/wiki/Downloads下载VirtualBox <版本> for OS ...
- Webpack安装和配置
一.安装和配置webpack 1.全局安装webpack 这样就安装好了webpack,可以再全局通过webpack -v来查看是否安装成功. 2.先创建项目目录结构,根目录是mywebpack.进入 ...
- windows系统下GCC的安装与配置
刚开始看 C++ Primer,看到编译器的部分,自己搜了搜怎么搭建GCC,搜到以下内容,复制过来留个印象: windows系统下GCC的安装方法,以及一些环境变量的配置,如果对GCC不是很清楚,关于 ...
- Webpack的基本配置和打包与介绍
1. 前言 1.1 Webpack是什么 可能有很多的小伙伴对于这个Webpack既熟悉又陌生,有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包,但 ...
- Webpack的基本配置和打包与介绍（二）
1. 前言 在上一章中我们学习到了webpack的基本安装配置和打包,我们这一章来学学如何使用loader和plugins 如果没看第一章的这里有传送门 2. Loader 2.1 什么是loader ...
随机推荐
- iOS分发证书过期或手动吊销，会影响App的下架吗？
iOS distribution发布证书过期或者被手动revoke了app会被下架吗? 在距离distribution 证书过期一个月(或被手动revoke了)的时候会受到apple的邮件 编辑 ...
- Kubernetes(K8S) 安装Nacos，报 No DataSource set
原因,数据库为 MySQL 5.7 需要在yaml加上参数 mysql.db.param: "characterEncoding=utf8&connectTimeout=1000&a ...
- ES6常用知识学习札记
转载请注明出处 原文连接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么 首先弄明白ECMA和js的关系.E ...
- PS CJ20N 项目定义属性字段增强
一.CJ20N添加字段 二.用户出口 三.校验必输项 博客频遭盗窃,请移步公众号"斌将军",输入关键字"项目定义字段增强"查看 TRANSLATE with ...
- 图解 Promise 实现原理（二）—— Promise 链式调用
本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Xz2bGaLxVL4xw1M2hb2nJQ作者:Morrain 很多同学在学习 Promis ...
- 揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇
本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/Ka1pjJKuFwuVL8B-t7CwuA作者:悟空中台研发团队 vivo大厦(南京) 一 ...
- kafka集群四、权限增加ACL
系列导航 一.kafka搭建-单机版 二.kafka搭建-集群搭建 三.kafka集群增加密码验证 四.kafka集群权限增加ACL 五.kafka集群__consumer_offsets副本数修改 ...
- ttf转eot
Webfont Generator https://www.fontsquirrel.com/tools/webfont-generator 使用@font-face显示web自定义字体,字体获取工具 ...
- STM32CubeMX教程20 SPI - W25Q128驱动
1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) 野火DAP仿真器 keil µVision5 IDE(MDK-Arm ...
- SpringBoot中使用LocalDateTime踩坑记录
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...