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 ...
随机推荐
- 火山引擎 DataTester：如何用 A/B 测试做产品增长？
技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着如今越来越高的获客成本,用户拉新变得不再容易:而且由于获客成本的增高,让用户留存也变得更加重要.同时,一个产品的使 ...
- Solon Cloud 2.2.10 架构图发布
Solon Cloud 是在 Solon 的基础上构建的微服务开发套件.以标准与规范为核心,构建丰富的开放生态.为微服务开发提供了一个通用防腐层(即不用改代码,切换配置即可更换组件). 本次发布,展示 ...
- 项目基于 Solon 进行构建，一般都有到哪些东西？
例如: 每个微服务工程是采用Solon开发. 基于Solon Cloud 实现微服务的配置.服务注册.事件总线. 其中,最重要的是实现了Solon Rpc接口与RESTful接口均可以注册至任何注册服 ...
- SpringBoot 记录 access.log 日志
如何将不同业务模块产生的日志 分多文件记录 Tomcat 中有个日志 loca_access.log 可以记录每个接口的请求耗时,用于做性能等分析比较有用,SpringBoot里,默认不记录这个日志, ...
- NettyHandler 常用生命周期方法
NettyHandler 常用生命周期方法 @Component @ChannelHandler.Sharable //表示这里是线程安全的 public class ImServerHandler ...
- #1495：非常可乐（BFS+数论）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1495 BFS解法 题目 给三个数字 s n m s=n+m s在1到100之间 就是个倒水问题可以从第 ...
- 图解 Promise 实现原理（四）—— Promise 静态方法实现
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ作者:Morrain 了用法,原生提供了Promis ...
- 如何使用photoshop修改图片的像素大小(分辨率)
查看原始图片的分辨率如下:640*399
- docker查看日志：docker service logs 与 docker container logs
转载请注明出处: docker service logs 和 docker container logs 是两个不同的命令,用于查看 Docker 服务和容器的日志.以下是它们之间的区别: 1.doc ...
- 修改Keil uvison4 字体样式
1.点击扳手配置 2.点击Colors & Fonts,选择其中的8051:Editor C Files,选择Text,点击右侧的Courier New... 3.在里面就可以调节字体了