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. Solon 问答： 怎么切换环境配置？

    #应用配置文件活动选择(可用于切换不同的环境配置) solon.env: dev #例: # app.yml #应用主配置(必然会加载) # app-dev.yml #应用dev环境配置 # app- ...

  2. SQL SERVER 查询表结构，导出到Excel 生成代码用

    查询所有表 select * from information_schema.tables SQL SERVER 查询表结构,导出到Excel 生成代码用 --快速查看表结构字段(比较全面的) SEL ...

  3. python WordCloud matplotlib docx 简易生成docx报告

    # encode=utf-8 import numpy as np import matplotlib.pyplot as plt from docx import Document from doc ...

  4. deepin15.11系统使用罗技k380键盘

    罗技k380键盘官方支持安卓.windows.macos,就是没有支持Linux系统.在开发过程中使用的是Deepin15.11系统,如何连接罗技k380就是一个问题,折腾了一段时间后解决这个问题.记 ...

  5. Windows线程开发

    Windows线程开发 1.线程基础 Windows线程是可以执行的代码实例.系统十一线程为单位调度程序.一个程序当中可以有多个线程,实现多个任务的处理. Windows线程的特点: 线程都具有1个I ...

  6. ACM | 新版 C++ 特性

    本文来自 OI wiki,转载仅作学习记录使用. 注意 :考虑到算法竞赛的实际情况,本文将不会全面研究语法,只会讲述在算法竞赛中可能会应用到的部分. 本文语法参照 C++11 标准.语义不同的将以 C ...

  7. 六、mycat全局自增

    系列导航 一.Mycat实战---为什么要用mycat 二.Mycat安装 三.mycat实验数据 四.mycat垂直分库 五.mycat水平分库 六.mycat全局自增 七.mycat-ER分片 一 ...

  8. Java 21新特性-虚拟线程 审核中

    本文翻译自国外论坛 medium,原文地址:https://medium.com/@benweidig/looking-at-java-21-virtual-threads-0ddda4ac1be1 ...

  9. python · matplotlib | 如何绘制子图

    代码: import matplotlib.pyplot as plt import matplotlib matplotlib.rc("font",family='MicroSo ...

  10. [转帖]ntp导致的时钟回拨

    https://zhuanlan.zhihu.com/p/587313130 我们的服务器时间校准一般是通过ntp进程去校准的.但由于校准这个动作,会导致时钟跳跃变化的现象.而这种情况里面,往往回拨最 ...