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^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

相关内容

热门资讯

天弘基金困局:热门赛道集体折戟... 在2025年A股市场持续反弹的大背景下,天弘基金却深陷令人扼腕的业绩困境,犹如陷入一片尴尬的泥沼之中...
懂你所需 为你而想:稠州银行荣... 从“鸡毛换糖”走街串巷的吆喝,到如今万商云集的小商品集散中心,义乌,不断倾听时代的需求,哺育着浙江稠...
午后!A股,突然异动!什么情况... 倒车接人还是进入调整阶段?今日(9月18日)午后,A股突然回调。上证指数、创业板指盘中双双跌超1%,...
广济药业控股子公司维生素B6化... 新京报贝壳财经讯 9月18日,广济药业发布公告称,公司控股子公司湖北惠生药业有限公司(简称“惠生公司...
B站新“王牌”,呼之欲出 b站... 出品|虎嗅黄青春频道作者|商业消费主笔黄青春题图|视觉中国陈睿亲自抓游戏后,B 站重新找回了自信。近...
朗科智能:间接持有宇树科技约0... 新京报贝壳财经讯 9月18日,朗科智能在互动平台表示,根据最新的工商登记信息,公司投资的江苏疌泉红土...
甫康生物冲刺港交所:药明生物和...   中新经纬9月18日电 (王玉玲)近日,甫康生物科技(上海)股份有限公司(下称甫康生物)向港交所递...
A50直线跳水,银行股全线下跌... 记者丨唐铮玮编辑丨梁明 张嘉钰 江佩佩视频丨张迎9月18日,大盘全天冲高回落,三大指数均跌超1%,创...
拜登退休后在干什么 拜登退休后... 上周,美国前副总统哈里斯为新书做宣传,在一则文章中指名道姓抨击了拜登的团队,这一事件让正在抗癌的前总...
41万股民哭了:半导体“人气最... 谁都知道现在是半导体“牛市”。9月18日,晶圆制造龙头中芯国际、算力芯片设计龙头海光信息、设备龙头北...