前端工程化之:webpack1-5(配置文件)

 一、配置文件

 webpack 提供的 cli 支持很多的参数,例如 --mode ,但更多的时候,我们会使用更加灵活的配置文件来控制 webpack 的行为。
默认情况下, webpack 会读取 webpack.config.js 文件作为配置文件,但也可以通过 CLI 参数 --config 来指定某个配置文件。例:npx webpack --config vue.config.js。
配置文件中通过 CommonJs 模块导出一个对象,对象中的各种属性对应不同的 webpack 配置。

注意:配置文件中的代码,必须是有效的 node 代码。

打包过程中是在 node 环境下运行的,需要读取配置文件的内容,所以只能使用 CommonJS 导出。需要进行打包的源代码在打包过程中不需要运行,只是读取代码分析依赖关系,所以两种模块化都支持。

当命令行参数与配置文件中的配置出现冲突时,以命令行参数为准。

二、基本配置

  1.  mode 编译模式,字符串,取值为 development production ,指定编译结果代码运行的环境,会影响 webpack 对编译结果代码格式的处理。
  2.  entry 入口,字符串 (后续会详细讲解),指定入口文件
  3.  output 出口,对象(后续会详细讲解) ,指定编译结果文件。 filename 属性为指定出口文件名。

 以下为配置文件 webpack.config.js

module.exports = {mode: "development", // 打包环境,可以不写,默认生产环境entry: "./src/main.js", // 入口文件output: {// 出口文件filename: "bundle.js",},
};

三、devtool 配置

1、source map

source map 实际上是一个配置,配置中不仅记录了所有源码内容,还记录了和转换后的代码的对应关系。给开发者调试用。 

  • source map 源码地图
  • webpack 中的 source map 

最佳实践: 

  •  source map 应在开发环境中使用,作为一种调试手段。
  •  source map 不应该在生产环境中使用, source map 的文件一般较大不仅会导致额外的网络传输,还容易暴露原始代码。即便要在生产环境中使用 source map ,用于调试真实的代码运行问题,也要做出一些处理规避网络传输和代码暴露的问题。

2、webpack 中的 source map 

使用 webpack 编译后的代码难以调试,可以通过 devtool 配置来优化调试体验。

对于不同环境推荐的 devtool 配置推荐官网:

 devtool配置

// 隐藏源码地图
devtool: "none"
// 隐藏源码地图,但是有一些工具可以读取到
devtool: "hidden-source-map"
// 浏览器报错提示在源码,有源码地图
devtool: "eval"
// 将源码地图嵌入到打包后的main.js文件中
devtool: "eval-source-map"

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《动手学深度学习(PyTorch版)》笔记4.2 4.3

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过。…

85 总结一下最近遇到的一些 jar发布 相关的知识

前言 呵呵 最近有一些构建服务, 发布服务的一些需求 我们这里的服务 一般来说是 java application, spring boot application 针对发布, 当然最好是 增量发布, 尽量的减少需要传递给 发布服务器 的资源的大小 比如 我的这个 java application, 可能会存在很多依赖, 常规…

探讨Go语言在构建HTTP代理时的优势和挑战

亲爱的读者,让我们一起来探讨一下Go语言在构建HTTP代理时的优势和挑战。 首先,让我们来谈谈Go语言在构建HTTP代理时的优势。Go语言是一种高性能的编程语言,它具有简洁、高效的特点,非常适合构建高效的代理服务器。使用Go语言&…

springboot第52集:微服务分布式架构,统一验证,oauth,订单,地区管理周刊

在计算机领域中,FGC 通常代表 Full Garbage Collection,即全垃圾收集。垃圾收集是一种自动管理内存的机制,它负责回收不再被程序使用的内存,以便释放资源和提高程序性能。 当系统执行 Full Garbage Collection 时,它会…

【代码随想录-数组】二分查找

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

Android源码设计模式解析与实战第2版笔记(三)

第三章 自由扩展你的项目–Builder 模式 Builder 模式的定义 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。 Builder 模式的使用场景 相同的方法,不同的执行顺序,产生不同的事件结果时 多个部件或零件&…

【驱动系列】C#获取电脑硬件显卡核心代号信息

欢迎来到《小5讲堂》,大家好,我是全栈小5。 这是《驱动系列》文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点…

msvcp140.dll丢失,有什么好的解决方法?

msvcp140.dll 是 Microsoft Visual C Redistributable Package 的一部分,这是一个由微软开发并发布的运行时库文件。具体而言: 功能与用途: msvcp140.dll 是动态链接库(DLL)文件,包含了 C 标准库的实现和…

CSS3如何实现从右往左布局的按钮组(固定间距)

可以通过下方CSS实现,下面的CSS表示按钮从右往左布局,且间距为10px: .right-btn {position: relative;float: right;margin-right: 10px; }类似这种: 这种: 注意: 不能使用right:10px代替margin-right:10px&#x…

STM32第三节——点亮第一个LED灯

1 STM32CubeMX新建工程 如果是第一次打开STM32CubeMX,软件会自动下载一些组件,等待下载完成即可。 1.2 点击ACCESS TO MCU SELECTOR 选择CPU型号,我用的是STM32F103ZET6,选择 STM32F103ZETx,可以点击旁边的收藏图标…

husky结合commitlint审查commit信息

commintlint是一个npm包用来规范化我们的commit信息,当然这个行为的操作时期是在git的commit-msg生命周期期间,这一点当然是有husky来控制,需要注意的是commit-msg作为一个git生命周期会被git commit和git merge行为唤醒,并且可以…

flutter tab页面切换练手,手势滑动、禁止滑动、page切换动画,禁止切换动画。

1&#xff1a;AppBar、TabBar、TabBarView实现页面切换&#xff0c;点击tab后tabBarView有左右切换动画&#xff0c;滑动page联动tabBar class DevicePage extends StatefulWidget {const DevicePage({super.key});overrideState<DevicePage> createState() > _Devic…

OpenGL 入门(一)— 创建窗口

文章目录 前言创建一个窗口视口动态调整输入控制渲染 完整代码 前言 关键词介绍&#xff1a; OpenGL&#xff1a; 一个定义了函数布局和输出的图形API的正式规范。GLFW&#xff1a;一个专门针对OpenGL的C语言库&#xff0c;它提供了一些渲染物体所需的最低限度的接口。它允许…

2024美赛数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 模型…

【doghead】2: 数据产生及pacing发送

默认采用fake的数据生产者 FakeDataProducer也可以读取h264文件生成:H264FileDataProducerUSE_FAKE_DATA_PRODUCER G:\CDN\BWE-DEV\Bifrost\worker\src\bifrost\bifrost_send_algorithm\bifrost_pacer.cpp FakeDataProducer 生产制造rtp包 ExperimentDumpData : 可用带宽、发…

【C/C++】详解程序环境和预处理(什么是程序环境?为什么要有程序环境?如何理解程序环境?)

目录 一、前言 二、 什么是程序环境&#xff1f; 三、 为什么要有程序环境&#xff1f; 四、如何理解程序环境&#xff1f; &#x1f34e; ANSI C 标准 &#x1f350; 翻译环境和执行环境 五、详解翻译环境和执行环境 &#x1f347;翻译环境&#xff08;重点&#xff01…

Vue3动态插入组件

一、使用<component>is实现动态组件插入 <component>&#xff1a;一个用于渲染动态组件或元素的“元组件”。 :is : 要渲染的实际组件&#xff0c;当 is 是字符串&#xff0c;它既可以是 HTML 标签名也可以是组件的注册名。 <script> import Foo from ./F…

3ds Max宣传片怎么提升渲染速度?从硬件升级到云渲染,全面提升你的渲染速度!

在3ds Max中&#xff0c;渲染是一项耗时的任务&#xff0c;尤其是对于大型场景和复杂的动画。然而&#xff0c;通过一些优化策略和技巧&#xff0c;你可以显著加速渲染过程。以下是一些建议和技巧&#xff0c;帮助你提高3ds Max的渲染速度&#xff1a; 1.升级硬件&#xff1a; …

51单片机内部的主要寄存器

51单片机内部的主要寄存器 51单片机&#xff08;8051系列&#xff09;内部包含一系列特殊功能寄存器&#xff08;SFRs&#xff09;&#xff0c;这些寄存器用于控制和管理单片机的各种硬件资源&#xff0c;包括定时器、中断系统、串行通信接口、并行输入输出端口等。以下是51单…

leetcode88合并两个有序数组

力扣&#xff08;LeetCode&#xff09;-合并两个有序数组 方法一 | 合并后排序 题目要求将两个有序数组合并并保证合并后的数组仍然有序。 观察题目可以看出&#xff0c;nums1的容量大小总是 mn&#xff0c;所以 nums2能够合并到 nums1中。 那就将 nums1中未赋值的地方赋上 …