webpack系列之webpack的基本使用
admin
2024-04-24 05:21:36
0

文章の目录

  • 一、创建列表隔行变色项目
    • 1、新建项目空白目录
    • 2、新建src源代码目录
    • 3、新建src -> index.html首页
    • 4、初始化首页基本的结构
    • 5、运行 `npm install jquery -S`命令,安装jQuery
    • 6、通过模块化的形式,实现列表隔行变色效果
  • 二、在项目中安装和配置 webpack
    • 1、运行 `npm install webpack webpack-cli -D` 命令,安装 webpack 相关的包
    • 2、在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件
    • 3、在 webpack 的配置文件中,初始化如下基本配置:
    • 4、在 package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:
    • 5、在终端中运行 npm run dev 命令,启动 webpack 进行项目打包。
  • 三、示例
  • 写在最后


一、创建列表隔行变色项目

1、新建项目空白目录

运行 npm init -y命令,初始化包管理配置文件 package.json

2、新建src源代码目录

3、新建src -> index.html首页

4、初始化首页基本的结构

5、运行 npm install jquery -S命令,安装jQuery

6、通过模块化的形式,实现列表隔行变色效果

二、在项目中安装和配置 webpack

1、运行 npm install webpack webpack-cli -D 命令,安装 webpack 相关的包

2、在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件

3、在 webpack 的配置文件中,初始化如下基本配置:

module.exports = {mode: "development" // mode用来指定构建模式
};

4、在 package.json 配置文件中的 scripts 节点下,新增 dev 脚本如下:

"scripts": {"dev": "webpack" // script 节点下的脚本,可以通过 npm run 执行
}

5、在终端中运行 npm run dev 命令,启动 webpack 进行项目打包。

三、示例

index.html

本文件中引用的是打包后的main.js文件


Document
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

index.js

import $ from "jquery";
$(function () {$("li:odd").css("backgroundColor", "blue");$("li:even").css("backgroundColor", "lightblue");
});
console.log(1111);

package.json

{"name": "zz","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.3.1"},"devDependencies": {"webpack": "^5.75.0","webpack-cli": "^5.0.1"}
}

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

相关内容

热门资讯

石大胜华:上半年预亏5200万... 7月1日晚间,石大胜华新材料集团股份有限公司(石大胜华,603026.SH)发布业绩预亏公告,公司财...
董宇辉讲“横渠四句”,刮起一场... 靠着知识分子标签出圈的董宇辉,眼下正在承受这一标签带来的副作用。起因是董宇辉在直播时讲到了北宋思想家...
复洁环保:隽洁投资拟减持不超3... 7月1日晚间,上海复洁科技股份有限公司(复洁环保,688335.SH)公告,截至本公告披露日,公司持...
影像全程回顾丨多架歼-20起飞... 歼-20已成为警巡东海重要力量,面对外舰挑衅寸步不让,空中博弈也分毫不退。 一次,外军机逼近我国领...
每月花28元与偶像聊天,QQ音... 红星资本局7月1日消息,QQ音乐于6月30日正式上线了“bubble”产品(以下简称“QQ音乐bub...
上半年IPO受理超去年全年百单... 单日41单IPO申请获得受理,6月最后一天,A股IPO市场迎来受理最高峰。6月30日,沪深北交易所受...
交易5年后收到税务局通知,60... 本文来源:时代周报 作者:周松清交易完成5年后,税务局突然向重庆路桥(600106.SH)追缴税款。...
1美元=7.15人民币!人民币... 本周二,离岸人民币对美元汇率是7.15。自4月初以来,不到3个月的时间,离岸人民币已经升值了近300...
一连三张罚单,中信证券分公司遭... 日前,浙江证监局一连发布了三份监管措施公告,内容均指向了中信证券分支机构以相关从业人员。具体来看,涉...
粤开证券新一届领导班子亮相,连... 7月1日,粤开证券发布董事长、职工代表董事和高级管理人员换届公告,郭川舟获选公司董事长;据披露,郭川...