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. Java 全新生态的框架，Solon v1.10.12 发布

    一个更现代感的 Java 应用开发框架:更快.更小.更自由.没有 Spring,也没有 Servlet,独立的生态.主框架仅 0.1 MB.Helloworld: @Controller public ...

  2. Sublime Ctrl+B 编译输出乱码

    1.输入乱码如图 2.Preferences -> Browse Packages.. 3.加入  "env": { "PYTHONIOENCODING" ...

  3. Python 数组比较

    a = [1, 2, 3, 5, 6, 5, 7, 8] b = [1, 3, 4, 5, 6, 3, 8, 7] print('A => %s' % a) print('B => %s' ...

  4. WebService rwsp:NoRunningCommunicationPointAvailable

    SoapUI 调WebService 报 No running communication point is configured to process this request. 错误 检查入参是否 ...

  5. python jira 取提出指向未解决的问题

    #!/usr/bin/python # -*- coding: utf-8 -*- import sys, os,time,requests,datetime import schedule from ...

  6. 使用nginx代理emqx的TCP、WS、WSS连接请求

    项目代理关系: 注:主机上已存在名为:nginx-proxy 的一级 nginx 的代理,将监听了主机的 80.443端口 docker-compose.yml version: "3.7& ...

  7. Serverless 架构下的 AI 应用开发

    Serverless架构与CI/CD工具的结合 CI/CD 是一种通过在应用开发阶段引入自动化流程以频繁向客户交付应用的方法.如图所示,CI/CD 的核心概念是持续集成.持续交付和持续部署. 作为一个 ...

  8. 嵌入式数据库H2作为服务端

    H2数据库一般情况都是作为嵌入式的数据库服务,不需要多个应用连接同一个h2的服务,但有的情况下需要他像oralce那样提供数据服务让多个应用访问. 一.环境准备(linux) 1.其他环境下生成的H2 ...

  9. VueTreeselect

    https://www.vue-treeselect.cn/ 官网简介

  10. uniapp H5扫码解决方案

    JS通过webView调用本地相机扫码二维码,然后webView把二维码数据传给JS 网上找了一堆资料,都是JS传值给webView的,这里自己看了下代码,通过两个步骤实现此功能1,通过JS调用web ...