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 ...
随机推荐
- Axure App 垂直滚动
拖两个动态面版 最外层[动态面板]用来定义显示区域,高度:692 (根据实际来) 里面的[动态面板],用来放内容,高度根据实际情况来,示例中是:1920 如下图所示 里面的[动态面板]添加垂直滚动 外 ...
- ElasticSearch 精确查询统计
ElasticSearch 精确查询统计 match_phrase:短语匹配,不分词 GET logback-2022-08/_search { "size": 1, //显示1条 ...
- kill 进程时遇到的一件有意思的事情
案例现象 一般来讲,我们在 kill 掉一个进程的时候通常有两个选择: 找到进程的 pid 号,然后执行 kill 命令 找到进程的名字,然后执行 pkill 命令 pkill 和 kill 命令都是 ...
- 聊一聊：MyBatis和Spring Data JPA的选择问题
从个人开发角度来说,Spring Data JPA更好用,是因为开发起来更快. 但从团队角度,我们希望更好的维护性,spring data jpa就差一些,或者说对后期人的要求更高. 很容易出现这种情 ...
- Java面试——数据库知识点
MySQL 1.建 主键:数据库表中对储存数据对象予以唯一和完整标识的数据列或属性的组合.一个数据列只能有一个主键,且主键的取值不能缺失,即不能为空值(Null). 超键:在关系中能唯一标识元组的属性 ...
- C# 双向链表的实现
类数据 public class Objects { private int number; /**//* 货物编号 */ private string name; /**//* 货物名称 */ pr ...
- 供应链投毒预警 | 恶意Py包仿冒tensorflow AI框架实施后门投毒攻击
概述 本周(2024年01月15号),悬镜供应链安全实验室在Pypi官方仓库(https://pypi.org/)中捕获1起Py包投毒事件,投毒者利用包名错误拼写(typo-squatting)的攻击 ...
- 【转】获取本地图片的URL
在写博客插入图片时,许多时候需要提供图片的url地址.作为菜鸡的我,自然是一脸懵逼.那么什么是所谓的url地址呢?又该如何获取图片的url地址呢? 首先来看一下度娘对url地址的解释:url是 ...
- RSA趣题篇(简单型)
1.n与p的关系 题目 ('n=', 288990088827100766680640490138486855101396196362885475612662192799072729620922966 ...
- JMS微服务开发示例（七）使用 Serilog 作为日志提供者
nuget 引入: Serilog.Extensions.LoggingSerilog.Settings.ConfigurationSerilog.Sinks.ConsoleSerilog.Sinks ...