webpack中development和production的理解

已于 2022-05-11 00:17:40 修改
阅读量2.5k 收藏 1
点赞数
分类专栏： 前端_node 文章标签： webpack vue.js 前端
于 2022-05-02 22:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_Common_Man/article/details/124546615
版权
webpack是一个用于打包JavaScript应用程序的模块打包器，提供development和production两种模式。development模式下打包的文件体积较大，保留源码的可读性，适合开发阶段；production模式则对文件进行压缩，体积更小，加载速度更快，适用于线上部署。两者的区别在于打包优化的程度和速度，直接影响到项目的运行效率和加载速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【名词解释】

webpack：

（1）官方解释：webpack是现代 JavaScript 应用程序的静态模块打包器

（2）我的理解：webpack就是一个打包器，用来本地项目文件夹打包压缩成一个体积更小的项目文件夹

development：是webpack配置文件webpack.config.js中导出模块module.exports的一个对象中属性名叫mode的属性值，代表开发模式

production：也是webpack配置文件webpack.config.js中导出模块module.exports的一个对象中属性名叫mode的属性值，代表生产模式（也叫线上模式）

两者的联系：都能改变文件的打包模式，都是mode属性的属性值

两者的区别：

本质区别：打包的模式不同，development是将目标文件打包成开发模式下的文件，而production则是打包成生产模式下的文件。

其它区别：

（1）体积不一样。development打包的文件体积较大；production打包的文件体积较小

（2）打包速度不一样。development因为是给开发者看的，一些换行，空格和注释都没删掉，没有进行压缩，所以打包速度会快；production是上线用的模式，为了更快的解析代码，进行了压缩，所以打包速度更慢

以上为个人见解，希望各位大佬不吝指正

webpack实践之路（九）：development与production的配置
若水弹丸之地
01-16 3139
一、准备工作 在终端输入： > mkdir webpack_demo > cd webpack_demo > mkdir src > mkdir dist > npm init -y > sudo npm install webpack webpack-cli --save-dev > sudo npm install --save-dev html-...
Webpack打包优化
最新发布
江湖的博客
02-21 1011
Webpack 打包优化代码分割（splitChunks）Tree Shaking（去除未使用代码）压缩代码（TerserPlugin）启用缓存优化图片、CSS 和资源使用动态导入和懒加载合理配置entry和mode这些优化方法不仅能有效提高构建性能，还能减小最终的打包文件体积，从而提升页面加载速度和用户体验。在实际开发中，选择合适的优化策略根据项目规模和需求进行配置是至关重要的。
Webpack5开发和生产模式
小洋人最happy的专栏
05-30 1390
一、简介 前面介绍过，在webpack.config.js的mode配置中有development和production两个选项，那有什么区别呢？本篇文章就简单介绍下。 二、开发模式 2.1 简介 开发模式(mode: development)顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范
webpack中Development和Production模式的区分打包
weixin_30443813的博客
05-01 444
当我们在开发一个项目的时候，我们一般用development这个环境进行项目的开发，在这个环境下，webpack使用dev-server，帮我们启用一个服务器，然后这个服务器里面还集成了一些，比如hmr这样的特性，只要我更改了代码，他会帮我们重新打包，然后我们代码的内容会实时的展示在对应的页面上，所以开发环境上，development这样的模式非常的方便，但是一旦我们的代码开发完成了，我...
【webpack】快速笔记13 -- development和production模式的区分打包
Umbrella_Um的博客
09-08 378
回顾 上一篇我们进行配置Tree Shaking时是不是分两种环境进行配置分析，每次我们都需要改 webpack.config.js 里面的代码，现在能不能将这两个环境的代码都有自己的script启动命令，这样我们就可以通过对应输入命令行代码启动对应的环境的webpack了 分离开发和生产配置 分离： 根据上面说的问题，那我们可以新建两个webpack配置，一个为webpack.dev.js，另一...
webpack的development和production模式
qq_43157227的博客
09-21 540
webpack的development和production打包模式学习以及打包运行的常见问题
简单封装webpack中development和production两种模式的切换
bamnyt的博客
11-22 850
简单封装webpack中development和production两种模式的切换 自己写的代码在webpack的development模式下调试好之后想换成production模式生成相应这文件，这使得要改相当的代码或者写多一份webpack.config.js文件，出于方便，就封装了一个简单的模板。 相关packge的支持 webpack webpack-cli webpack-dev-se...
development 和 production 模式的区别
大脸猫~
05-07 6179
webpack中两种开发模式development 和 production 的区分打包 当我们在开发一个项目的时候，一般用development这个环境进行项目的开发，在这个打包环境下，webpack我们使用了devserve，可以帮我们起一个服务器，这个服务器里面还集成了一些HTML这样的特性，只要更改了代码，会帮我们重新打包，然后代码的内容会实时的展示在服务器对应的网页上。所以在开发环境下使...
webpack.config.js配置（development&production）
weixin_44290787的博客
03-18 1365
development.config.js //引入html-webpack-plugin模块，目的是生成index.html模板 const HtmlWebpackPlugin=require('html-webpack-plugin'); //引入vue-loader中的plugin，才能成功编译.vue文件 const VueLoaderPlugin=require('vue-loader/...
webpack开发环境和生产环境的深入理解
10-17
本文将详细探讨如何在Webpack中设置开发环境和生产环境，并解释相关的配置策略。 #### 二、环境区分原理 在了解具体的配置之前，我们需要先明白如何在Webpack中区分开发环境与生产环境。这是通过命令行传递参数...
webpack Develoment 和 Production 模式的打包
酒馆不打烊
03-21 482
Tree Shaking Tree Shaking 在打包过程把声明但不引入的函数过滤掉，减少体积 只支持ES Module 模式，不支持require()模式， 在webpack 开发环境下加入optimization模式 optimization: { usedExports: true } 还要在package.json 中加入 sideEffects属性 可赋值为false...
webpack 开发模式管理 Development
weixin_34161032的博客
03-17 315
webpack 开发模式管理 Development GitHub 学习 Demo。 接下来将一些开发时的 webpack 配置。 warnning ： 本指南中的工具仅用于开发，请避免在生产中使用它们！ 先把 mode 属性变为 development. # webpack.config.js const path = require('path'); const HtmlWebp...
webpack4系列笔记之（8）development 和production模式区分打包
qq_42744920的博客
06-12 1075
development 和production模式区分打包
复习webpack4之production与development区分打包
weixin_33913377的博客
05-05 589
之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。 这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。 1.如何区分打包 我们在prod...
webpack生产模式配置
jieyucx的博客
06-13 2124
生成模式（production mode）是指在开发完成后将代码部署到生产环境中运行的模式，通常需要进行代码压缩、优化、合并，以减少文件大小和请求次数，提高页面加载速度和运行效率。开发模式（development mode）则是指在开发过程中使用的模式，通常需要对代码进行调试、热更新等操作，以提高开发效率和代码质量。在开发模式下，通常不需要进行代码优化和压缩，可以保留源代码的完整性，以便于调试和排查问题。
01_Webpack基础（开发模式）
zyq的博客
05-03 670
开发模式：仅能编译 JS 中的ES Modle语法生产模式：能编译 JS 中的ES Modle语法，和压缩 JS 代码。
webpack小知识点13-Development和Production
dianxian3016的博客
08-14 163
1.由于开发和线上环境的配置文件不一样，所以我们把配置文件分成两个。webpack.dev.js用于开发，webpack.prod.js用于线上 webpack.prod.js //webpack.prod.js const path = require("path")const HtmlWebpackPlugin = require('html-webpack-plugin'...
妈妈再也不用担心我不会webpack了
weixin_34034670的博客
11-12 283
前言webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。 工程化 这里是一个项目工程化，规范化的设置，如果是初次使用webpack的同学还是最后在看这一块知识 现在vue、react等脚手架都会自动将开发环境使用的webpack的配置文件和...
【Webpack】生产模式和开发模式
小秀的博客
02-17 987
不同于开发环境，生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度1）创建两个单独的 Webpack 配置文件：一个用于开发环境（如 webpack.dev.js），另一个用于生产环境（如 webpack.prod.js）。每个配置文件包含特定环境下的依赖和优化。2）Webpack 通常通过 NODE_ENV 环境变量来区分当前的运行环境。开发环境下，设置为 “development”；
Webpack 测试实践：深入理解和应用
6. **模式(mode)**：在4.x版本后，Webpack引入了模式(mode)的概念，它允许开发者在开发环境(development)和生产环境(production)之间切换构建配置。这样，可以分别利用开发环境的调试工具和生产环境的优化工具。 7....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值