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. React Native 打包 App 发布 iOS 及加固混淆过程

    React Native 打包 App 发布 iOS 及加固混淆过程 摘要 本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混 ...

  2. Java 网络编程 —— 基于 UDP 的数据报和套接字

    UDP 简介 UDP(User Datagram Protocol,用户数据报协议)是传输层的另一种协议,比 TCP 具有更快的传输速度,但是不可靠.UDP 发送的数据单元被称为 UDP 数据报,当网 ...

  3. 通义千问，阿里版ChatGPT，拿到邀请码了

    大家好,我是章北海mlpy 通义千问是阿里巴巴推出的一个大型预训练模型,是达摩院自主研发的超大规模语言模型,能够回答问题.创作文字,还能表达观点.撰写代码. 昨天中午,阿里云通过官方微信公众号对旗下的 ...

  4. 创建DOM节点时出现错误信息：box.appendChild is not a function

    1.代码正常书写如下 <div class="box"></div> <!-- JavaScript代码 --> <script> ...

  5. GitHub CEO发文：严格限制俄罗斯获取侵略性军事能力所需要的技术

    前几天,在微信群里就有小伙伴发了一些关于GitHub将限制俄罗斯开发人员使用开源软件的消息,引起程序员圈子的热烈讨论. 就在不久前,GitHub CEO在GitHub官方博客发文阐述了对乌克兰战争的回 ...

  6. C#9.0：Improved Pattern Matching

    增强的模式匹配 C#9.0添加了几种新的模式.我们可以参阅模式匹配教程 ,来了解下面代码的上下文: 1 public static decimal CalculateToll(object vehic ...

  7. POJ：3279-Fliptile【状态压缩】【DFS】

    POJ-3279 经典[状态压缩][DFS]题型 题目大意:有一个 M * N 的格子,每个格子可以翻转正反面,它们有一面是黑色,另一面是白色.黑色翻转之后变成白色,白色翻转之后则变成黑色. 游戏要做 ...

  8. CH0304 IncDec Sequence （差分）

    题目链接: https://ac.nowcoder.com/acm/contest/999/B 思路:(见图中解释) AC代码: #include<bits/stdc++.h> using ...

  9. Codeforces Global Round 12（个人题解）

    1450A. Avoid Trygub 挺简单的题,题意是避免字符串中有子串"Trygub" 只要给字符串排序就可以了,这样一定不会出现 void solve() { string ...

  10. Canal 组件简介与 vivo 帐号实践

    互联网应用随着业务的发展,部分单表数据体量越来越大,应对服务性能与稳定的考虑,有做分库分表.数据迁移的需要,本文介绍了vivo帐号应对以上需求的实践. 一.前言 Canal 是阿里巴巴开源项目,关于什 ...