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. 火山引擎DataTester：企业如何使用A/B实验优化商业化能力

      商业化是企业将研发成果,如新产品.新技术.新服务等,转变成可盈利的商业化产品:整个流程中包含了研发.推广.服务,全程通过精细化管理运营.商业化的本质是流量的变现,而对企业而言,商业化链路的打磨至关 ...

  2. 年搜索量超 7 亿次背后：这款 APP 用火山引擎 DataTester 完成“数据驱动”

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 双十一刚过,双十二在即,随着线上营销玩法的层出不穷,各平台之间的价格逐渐"内卷".消费者对跨平 ...

  3. Solon Web 开发：一、开始

    1.第一个Web应用 回顾一下<快速入门>里做过的事情,然后开始我们的第一个web应用 1.1.pom.xml配置 设置solon的parent.这不是必须的,但包含了大量默认的配置,可简 ...

  4. 【Java爬虫】如何通过 API 递归分页爬取网页数据

    前言 在最近的互联网项目开发中,需要获取用户的访问ip信息进行统计的需求,用户的访问方式可能会从微信内置浏览器.Windows浏览器等方式对产品进行访问. 当然,获取这些关于ip的信息是合法的.但是, ...

  5. c#-微软2

    练习-编写第一个代码: 在第一次练习中你将使用c#将神圣的程序员用语打印到控制台的标准输出 编写第一行代码: 在软件开发者中,有这么一个传统,那就是将"Hello World!"这 ...

  6. 分库分表Sharding-JDBC + MyBatis-Plus动态表名

    MyBatis-Plus动态表名 1: https://blog.csdn.net/Zack_tzh/article/details/107529746?utm_medium=distribute.p ...

  7. linux 通过docker安装 elasticsearch-head

    本文为博主原创,未经允许不得转载: 1. 使用docker安装 elasticsearch-head #拉取镜像 docker pull mobz/elasticsearch-head:5 #创建容器 ...

  8. idea导入maven项目结构不全

    本文为博主原创,转载请注明出处 将本地的项目导入idea中,其操作第一步为: File->open->选中导入maven项目的pom文件,正常情况通过该步骤项目就会导入到idea中. 通过 ...

  9. Postman 压力测试

    本文为博主原创,未经允许不得转载: postman 还提供了接口压力测试的功能,通过这种方式可以测试接口性能. 若接口测试需要通过pre s单独封装进行计算一些参数时,可以参考我的上一篇博客: Pos ...

  10. 分享一个在线二维码生成器（基于qrcode.js开发）

    一种二维码扫描与生成的工具, 它可生成个性化二维码, 支持文本.网址.图片.短信.电话等格式及主题,提供融合码功能 演示地址 https://qrcode.gitapp.cn 关键代码 var qrc ...