webpack搭建开发环境

webpack搭建开发环境

  • 一.webpack开发模式
  • 二.webpack打包模式
  • 三.webpack打包模式应用
  • 四.Webpack 前端注入环境变量
  • 五.Webpack 开发环境调错 source map
  • 六. Webpack 设置解析别名路径
  • 七.优化-CDN的使用
  • 八.多页面打包
  • 九.优化-分割公共代码

一.webpack开发模式

作用:启动 Web 服务,打包输出源码在内存,并会自动检测代码变化热更新到网页,不用自己一直重新打包
步骤;
1.下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

2.配置自定义命令,并设置打包的模式为开发模式
在webpack.config.js中设置

// ...
module.exports = {
   
// ...
   mode: 'development'
}

在package.json中设置

"scripts": {
   
// ...
   "dev": "webpack serve --mode=development"
},

3.使用 npm run dev 来启动开发服务器,访问提示的域名+端口号,在浏览器访问打包后的项目网页,修改代码后试试热更新效果
在 js / css 文件中修改代码保存后,会实时反馈到浏览器

二.webpack打包模式

1.打包模式:告知 Webpack 使用相应模式的内置优化

2.分类:

模式名称 模式名字 特点 场景
开发模式 development 调试代码,实时加载,模块热替换等 本地开发
生产模式 production 压缩代码,资源优化,更轻量等 打包上线

3.如何设置影响 Webpack呢?
方式1:在 webpack.config.js 配置文件设置 mode 选项

// ...
module.exports = {
   
// ...
    mode: 'production'
}

方式2:在 package.json 命令行设置 mode 参数

"scripts": {
   
   "build": "webpack --mode=production",
   "dev": "webpack serve --mode=development"
},

注意:命令行设置的优先级高于配置文件中的,推荐用命令行设置

三.webpack打包模式应用

1.需求:比如在开发模式下用 style-loader 内嵌更快,在生产模式下提取 css 代码
2. 方案1:webpack.config.js 配置导出函数,但是局限性大(只接受 2 种模式)
方案2:借助 cross-env (跨平台通用)包命令,设置参数区分环境
方案3:配置不同的 webpack.config.js (适用多种模式差异性较大情况)
3.主要使用方案 2 尝试,其他方案可以结合点击跳转的官方文档查看尝试
4.步骤:
下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2.配置自定义命令,传入参数名和值(会绑定到 process.env 对象下)
在这里插入图片描述
3.在 webpack.config.js 区分不同环境使用不同配置

module: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506526.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

亮数据,可视化数据采集强大利器

前言 随着信息技术的飞速发展,我们已经进入了一个以数据为中心的世纪。在这个时代,数据不仅仅是信息的载体,它已经成为了推动社会进步、创新科技、增强决策和驱动经济增长的关键资源。 在这个数据世纪中,掌握数据的能力等同于掌…

[计算机效率] 文件对比工具:Beyond Compare 4

3.10 文件对比工具:Beyond Compare 4 Beyond Compare 4是一款功能强大的文件和文件夹比较工具,它能够帮助用户在不同系统或版本之间快速比较和同步文件和文件夹。以下是Beyond Compare 4软件的一些主要特点: 文件和文件夹比较:Be…

普发Pfeiffer 真空TCP120-TCP380-TCP035-TCP600 使用手侧

普发Pfeiffer 真空TCP120-TCP380-TCP035-TCP600 使用手侧

MultiPath HTTP:北大与华为合作部署FLEETY

当前的终端基本都能支持蜂窝网络和wifi网络,然而,不同的网络通路都不可避免的会出现信号不好或者其他因素引起的通路性能(吞吐量、时延等)下降。为了能够提升终端业务体验,很多不同的MultiPath方案被提出,其中,包括应用…

程序运行要求,三角形三边的值来自于本地一个文本文件input.txt,三角形类型的值最终存储于本地文本文件out.txt中。

本周完成如下2个实验: 面向对象数据持久化编程,使用java编写程序,完成三角形的类型判断,程序模块要求如下: 创建三角形对象triangle,该对象属性有三边a,b,c,该对象有: 方法1&#xf…

linux 软中断入门

在 linux 中,任务执行的载体有很多,包括线程,中断,软中断,tasklet,定时器等。但是从本质上来划分的话,任务执行的载体只有两个:线程和中断。软中断和 tasklet 的执行可能在中断中&am…

【无限列车1】SpringCloudAlibaba 与 SpringBoot后端架构的搭建

【无限列车1】SpringCloudAlibaba 与 SpringBoot后端架构的搭建 1、版本说明二、日志相关配置3、AOP 打印日志 1、版本说明 【SpringCloud 版本说明】https://sca.aliyun.com/zh-cn/docs/2022.0.0.0-RC1/overview/version-explain 🖊 RC(Release Candi…

离散数学--谓词逻辑之复习与前束范式与谓词演算的推理理论

引子:在命题演算中,常常要化成规范形式,对于谓词的演算,可以化成与他等价的范式! 前束范式定义: 一个公式,如果量词均非否定地在全式的开头,它们的作用域延伸到整个公式的末尾&…

绘制空心环形

1.通过几个div拼接绘制空心环形进度条。 通过 -webkit-mask: radial-gradient(transparent 150px, #fff 150px);绘制空心圆 html:<body><div class"circle"><div class"circle-left"></div><div class"circle-left-mask&…

maven知识加强理解

maven知识 聚合: 父工程通过 modules标签&#xff0c;将子模块聚集起来&#xff0c;好处方便管理&#xff0c;父工程执行maven命令&#xff0c;所有的子模块都会执行 继承: 子模块通过parent标签&#xff0c;可以从父工程继承一些依赖 maven生命周期 三套 第一套:clean清理 第…

蓝桥杯(更新中)

递归与递推 递归 1.指数型枚举 解析&#xff1a;从 1 ∼ n 这 n 个整数中随机选取任意多个&#xff0c;输出所有可能的选择方案。 思路&#xff1a;枚举每一位对应的数字选与不选&#xff0c;例如&#xff1a;第一位对应的数字为1&#xff0c;有一种方案是选1&#xff0c;另…

IC-随便记

1、移远通信---通信模组 物联网解决方案供应商&#xff0c;可提供完备的IoT产品和服务&#xff0c;涵盖蜂窝模组(5G/4G/3G/2G/LPWA)、车载前装模组、智能模组&#xff08;5G/4G/边缘计算&#xff09;、短距离通信模组(Wi-Fi&BT)、GNSS定位模组、卫星通信模组、天线等硬件产…

java数据结构与算法刷题-----LeetCode279. 完全平方数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 动态规划四平方和定理 动态规划 解题思路&#xff1a;时间复杂度…

图像处理_积分图

目录 1. 积分图算法介绍 2. 基本原理 2.1 构建积分图 2.2 使用积分图 3. 举个例子 1. 积分图算法介绍 积分图算法是图像处理中的经典算法之一&#xff0c;由Crow在1984年首次提出&#xff0c;它是为了在多尺度透视投影中提高渲染速度。 积分图算法是一种快速计算图像区域和…

LeetCode-56. 合并区间【数组 排序】

LeetCode-56. 合并区间【数组 排序】 题目描述&#xff1a;解题思路一&#xff1a;排序&#xff1f;怎么排&#xff1f;当然是排各个区间的左边界&#xff0c;然后判断下一个边界的左边界与结果数组里面的右边界是否重叠。解题思路二&#xff1a;优化解题思路三&#xff1a;0 题…

Linux: 进程优先级

Linux: 进程优先级 一、进程优先级概念二、如何查看进程优先级三、如何修改进程的优先级&#xff08;PRL vs NI&#xff09;四、为何优先级PRL必须限定范围五、进程其他特性 一、进程优先级概念 优先级的本质就是排队&#xff0c;而排队则是资源不足所引起的。在计算机中&#…

《Lost in the Middle: How Language Models Use Long Contexts》AI 解读

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

【JavaScript 漫游】【049】ES6 规范中对象的扩展

文章简介 本篇文章为【JavaScript 漫游】专栏的第 049 篇文章&#xff0c;对 ES6 规范中对象的扩展知识点进行了记录。具体包括&#xff1a; 属性的简洁表示法属性名表达式方法的 name 属性属性的可枚举性和遍历super 关键字对象的扩展运算符链判断运算符Null 判断运算符新增…

MIT最新研究成果 机器人能够从错误中纠偏 无需编程介入和重复演示

目前科学家们正在努力让机器人变得更加智能&#xff0c;教会他们完成诸如擦拭桌面&#xff0c;端盘子等复杂技能。以往机器人要在非结构化环境执行这样的任务&#xff0c;需要依靠固定编程进行&#xff0c;缺乏场景通用性&#xff0c;而现在机器人的学习过程主要在于模仿&#…

ctf题目

目录 1.文件包含的一道题目&#xff0c;没什么难度&#xff0c; 2.一道sql注入的题目&#xff0c;伪静态 3.限制只能本地访问。 1.文件包含的一道题目&#xff0c;没什么难度&#xff0c; 但是一个点就是它这里去包含的那个文件名就是flag&#xff0c;而不是flag.php也不是f…