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

相关内容

热门资讯

小米跳过16发布17系列,全面... 红星资本局9月15日消息,今天上午,小米集团(1810.HK)总裁、手机部总裁、小米品牌总经理卢伟冰...
跨境支付连接世界 我国金融高水... 中国商报(记者 马文博)如今,日益高效、便捷、安全的跨境支付服务不仅可以满足境内外居民的生活需要,成...
A股预制菜概念板块整体上涨,得... 新京报贝壳财经讯(记者阎侠)9月15日,A股预制菜概念板块整体开盘即上涨,截至午间收盘,整体涨幅为0...
掘金科创板中盘成长力量 科创1... 今年以来,A股市场在政策暖风和资金推动下持续走强,上证指数于8月下旬连续突破3700、3800点整数...
创业板指涨超2%,预制菜、汽车... 记者丨李益文 黎雨桐编辑丨叶映橙 曾静娇9月15日,A股三大指数震荡上涨。截至上午收盘,上证指数早盘...
禾赛科技冲港股:“降价降线”抢... “激光雷达第一股”禾赛科技即将于9月16日登陆港交所,成为近两年来首家回港上市的中概股。从8月26日...
“挨打”的西贝,开始学习胖东来... 9月15日,据“中国新闻周刊”表示,西贝向一线员工发放了500元补贴,且西贝正在商讨进一步提升一线员...
创业板指半日涨2.13% 电池...   中新经纬9月15日电 周一,A股三大指数集体上涨。截至午间收盘,上证指数涨0.22%,报3879...
隐形主线“翻倍股”涌现!基金经... 出海逻辑成热门主题背后隐形主线。今年,市场主线轮动加速,人工智能、创新药、人形机器人、固态电池等热门...