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 ...
随机推荐
- Kubernetes(K8S) 镜像拉取策略 imagePullPolicy
镜像仓库,镜像已更新,版本没更新, K8S 拉取后,还是早的服务,原因:imagePullPolicy 镜像拉取策略 默认为本地有了就不拉取,需要修改 [root@k8smaster ~]# kube ...
- Axure RP 9 下载、破解激活教程、最新激活码，亲测可用
本教程适用于 Axure RP 9 Enterprise/Pro/Team 的激活.破解,最新激活码,适用于 windows, mac系统,仅用于学习 简介 Axure RP 9.0 破解版是一款功能 ...
- Go--发起HTTP请求
一.HTTP请求 根据 HTTP 标准,HTTP 请求可以使用多种请求方法.在日常开发中大多数会用到 5 种请求方法: GET.POST.PUT.PATCH 和 DELETE 方法 描述 GET 请求 ...
- 【HZERO】班翎工作流
班翎工作流 工作流流程 流程分类定义 接口管理 long类型写0 字符串写空 流程定义[画流程图] 人工节点-添加审批人规则 空-全局事件-选回调接口 我的待办 流程平台-我参与的流程 发起流程:wo ...
- AtCoder ABC 181 个人题解（本场GJ x 3）
补题链接:Here A - Heavy Rotation 对 \(N\) 进行奇偶判断,奇数穿 Black .偶数穿 White B - Trapezoid Sum 前 \(n\) 项和公式:\(S_ ...
- 深度学习（六）——神经网络的基本骨架：nn.Module的使用
一.torch.nn简介 官网地址: torch.nn - PyTorch 2.0 documentation 1. torch.nn中的函数简介 Containers:神经网络的骨架 Convolu ...
- MaxListenersExceededWarning:Possible EventEmitter memory leak detected.
打包出现内存溢出 解决办法:
- 堆和栈：JS数据怎么存储的？
JS数据存储主要分堆和栈两种, 栈空间:通常情况栈空间不会设置太大,主要用来存放一些原始类型的小数据,原始类型的数据有:Boolean.Null.Undefined.Number.BigInt.Str ...
- 简单剖析Hashmap
剖析 Java Hashmap 源码 在 Java 的集合框架中,HashMap 是一颗璀璨的明珠.通过深入挖掘其源码,我们将揭开 HashMap 的神秘面纱,理解其底层原理.扩容机制和数据结构. 1 ...
- 【TouchGFX】Widgets and Containers
Widgets and Containers 是 TouchGFX 应用最基础的东西,他们贯穿于 UI 的整个开发,属于 TouchGFX 的预制组件,同时也支持自定义实现 Widgets Widge ...