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安装和配置与打包的更多相关文章

  1. Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...

  2. day 84 Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置   1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...

  3. 从零开始搭建系统2.8——HDFS安装及配置

    从零开始搭建系统2.8——HDFS安装及配置

  4. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  5. 从零开始安装搭建win10与ubuntu20.04双系统开发环境——集安装、配置、软件、美化、常见问题等于一体的——超详细教程

    目录 **前言 ** 关于系统安装配置与软件安装 一.Win10安装ubuntu20.04双系统 1.按照自己的需求分区 2.配置软件镜像源 软件包管理工具介绍 更换APT源--使用国内镜像 3.解决 ...

  6. Mac OS X系统下利用VirtualBox安装和配置Windows XP虚拟机

    准备工作 下载并安装VirtualBox for Mac到https://www.virtualbox.org/wiki/Downloads下载VirtualBox <版本> for OS ...

  7. Webpack安装和配置

    一.安装和配置webpack 1.全局安装webpack 这样就安装好了webpack,可以再全局通过webpack -v来查看是否安装成功. 2.先创建项目目录结构,根目录是mywebpack.进入 ...

  8. windows系统下GCC的安装与配置

    刚开始看 C++ Primer,看到编译器的部分,自己搜了搜怎么搭建GCC,搜到以下内容,复制过来留个印象: windows系统下GCC的安装方法,以及一些环境变量的配置,如果对GCC不是很清楚,关于 ...

  9. Webpack的基本配置和打包与介绍

    1. 前言 1.1 Webpack是什么 可能有很多的小伙伴对于这个Webpack既熟悉又陌生,有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包,但 ...

  10. Webpack的基本配置和打包与介绍（二）

    1. 前言 在上一章中我们学习到了webpack的基本安装配置和打包,我们这一章来学学如何使用loader和plugins 如果没看第一章的这里有传送门 2. Loader 2.1 什么是loader ...

随机推荐

  1. 基于迁移学习的基础设施成本优化框架，火山引擎数智平台与北京大学联合论文被KDD收录

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   基于迁移学习的基础设施成本优化框架,火山引擎数智平台与北京大学联合论文被KDD收录 近期,第29届国际知识发现 ...

  2. Skywalking 8.1 Docker 服务端部署

    前置条件 Docker 安装 Elasticsearch ### 部署服务端 skywalking-oap-server docker pull apache/skywalking-oap-serve ...

  3. LayUI多文件上传，支持历史上传预览

    记录一次项目开发中,LayUI多个图片进行优化,需要支持多个图片上传.可删除某一个图片.支持加载上次上次图片. 页面代码: <div class="layui-upload" ...

  4. Vue2--入门学习

    看了慕课网的教学视频,觉得挺不错的,在此做个随堂记录,有兴趣的可以去看视频 vue版本:2.5 文档链接:https://v2.cn.vuejs.org/v2/guide/installation.h ...

  5. Arch Linux 更换国内镜像源

    自己用的 Arch Linux 在使用 pacman -Syu 更新系统时出现了连接超时的问题,看来又需要换个镜像源了.趁着今天还没想好要分享的内容,那就干脆以此为主题,总结一下如何给 Arch Li ...

  6. vue 3版本如何下载静态文件

    1.现将静态文件放到 public 目录下的static文件夹 2.<a href="/static/test.zip"  target="_blank" ...

  7. element-plus-admin学习笔记

    https://toscode.gitee.com/hsiangleev/element-plus-admin

  8. 无向图求割点 UVA 315

    ***割点概念:去掉一个点后图不连通,该点就为割点 割点满足的条件: 一个顶点u是割点,当且仅当满足(1)或(2) (1) u为树根,且u有多于一个子树. (2) u不为树根,且满足存在(u,v)为树 ...

  9. Rocketmq学习3——消息发送原理源码浅析

    一丶概述 RocketMQ 消息发送的原理流程可以分为以下几个步骤: 1. 创建生产者 在发送消息前,客户端首先需要创建一个消息生产者(Producer)实例,并设置必要的配置参数,如NameServ ...

  10. 例2.6 设计一个高效的算法，从顺序表L中删除所有值为x的元素，要求时间复杂度为0（n）空间复杂度为0（1）。

    1.题目 例2.6 设计一个高效的算法,从顺序表L中删除所有值为x的元素,要求时间复杂度为0(n)空间复杂度为0(1). 2.算法思想 3.代码 void DeleteX(SeqList LA, Se ...