第四十七篇:webpack的基本使用
2022/1/2 6:08:19
本文主要是介绍第四十七篇:webpack的基本使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
好家伙,
1.webpack的基本使用
写个例子:实现一个奇偶行变色列表
步骤如下:
① 新建项目空白目录,并运行 npm init-y命令,初始化包管理配置文件 package.json
② 新建src源代码目录
③ 新建 src->index.html 首页和src-> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery-S命令,安装jQuery
⑥ 通过ES6 模块化的方式导入jQuery,实现列表隔行变色效果
可以看到并没有实现效果
语法太高级,浏览器不兼容
试着用webpack去解决这个问题
2.在项目中安装webpack
在终端运行如下的命令,安装webpack相关的两个包:
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
其中
-S是 --save的简写
-D是 --save-dev的简写
3.在项目中配置 webpack
①在项目根目录中,创建名为webpack.config.js的 webpack配置文件,并初始化如下的基本配置:
module.exports={ mode:'development' }
// mode 用来指定构建模式。可选值有 development 和 production
②在package.json的scripts节点下,新增 dev 脚本如下:
"scripts":{ "dev": "webpack" }
// script 节点下的脚本,可以通过 npm run 执行。例如 npm run dev
③在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建
(出现了 ! 出现了 ! ! 是 " npm run dev " ! ! ! )
跑完之后:
成功了
其中多了一个dist文件,其中的main文件就是处理好后的文件
将<script>的src的路径改为main.js的路径
再次打开
搞定了
(配色有点阴间但是问题不大)
4.补充一个小点
4.1.这个是"development"版本的"npm run dev"
4.2这个是"production"版本的"npm run dev"
两图对比可看出:"development"版本的打包速度更快(开发版本需要打包快),
"production"版本的打包出来文件体积更小,(发布版本需要文件小)
That's all.
溜了溜了
"黑马程序员"NB
这篇关于第四十七篇:webpack的基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升