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

相关内容

热门资讯

独家 | 美团快乐猴签约10店... 交流快乐猴,实名添加微信lihua759321进群有市场人士告诉《商业观察家》,美团做的硬折扣线下超...
读懂IPO|红星冷链的业绩“冷... 本文来源:时代商业研究院 作者:彭元重 来源|时代商业研究院作者|彭元重编辑|郑琳近年来,随着消费端...
租客又找麻烦了... 租客又找... 图: charlotte.ager 我最近在看一位澳洲华人写的博客,写得很好,不知不觉我把他七八年的...
罗马仕最新声明:召回服务长期有... 7月15日,@ROMOSS罗马仕发布最新声明: 亲爱的朋友: 近日,我们关注到网络上关于罗马仕的大量...
英伟达开盘涨出大半个AMD!黄... 受H20芯片即将恢复对华销售利好提振,当地时间7月15日美股开盘后,英伟达股价大涨超过3%,市值增加...
55亿良品铺子「卖身」,零食江... 订阅 快刀财经 ▲ 做您的私人商学院包装和营销造就的高端故事已成往事,效率与价格正成为新赛点。作者 ...
英伟达、AMD股价开盘大涨,G... 美股周二开盘,AMD股价涨超8%,英伟达也涨超4%。消息面上,英伟达今日宣布将恢复AI芯片H20在中...
读懂IPO|剑桥科技业绩回弹后... 本文来源:时代商业研究院 作者:雷小艳 来源|时代商业研究院作者|雷小艳编辑|郑琳7月15日,剑桥科...
金价上涨叠加产能扩张,黄金矿企... 尽管黄金市场近期跌宕起伏,但黄金矿企在今年上半年已是赚得盆满钵满。国内黄金企业近日密集发布2025年...