webpack中development和production的理解

原创 已于 2022-05-11 00:17:40 修改 · 2.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #vue.js #前端

于 2022-05-02 22:07:13 首次发布
webpack是一个用于打包JavaScript应用程序的模块打包器，提供development和production两种模式。development模式下打包的文件体积较大，保留源码的可读性，适合开发阶段；production模式则对文件进行压缩，体积更小，加载速度更快，适用于线上部署。两者的区别在于打包优化的程度和速度，直接影响到项目的运行效率和加载速度。

【名词解释】

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 3190
一、准备工作 在终端输入： > 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-...
vue配置开发环境.env.development 和生产环境.env.production，在前端解决跨域问题
zx15271563333的博客
01-11 1267
在上面的例子中，我们使用了VUE_APP_API_BASE_URL作为API的基本URL。现在，你可以在Vue项目的代码中使用process.env.VUE_APP_API_BASE_URL来访问不同环境下的API基本URL。所有以/api开头的请求将被代理到VUE_APP_API_BASE_URL所指定的地址，并通过changeOrigin: true确保请求头中的Host字段正确。在生产环境中，你不需要配置代理，因为在生产环境下，你的前端代码和后端代码通常会部署到同一个域名下。
Vue2 中 .env.development .env.production 详细说明
day day up
11-07 4657
Vue CLI 项目中一个重要的概念。属性名必须以VUE_APP_开头，比如VUE_APP_XXX.env 全局默认配置文件，不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件.env.test 测试环境不同的模式会有不同的环境变量NODE_ENV。
Webpack5开发和生产模式
小洋人最happy的专栏
05-30 1460
一、简介 前面介绍过，在webpack.config.js的mode配置中有development和production两个选项，那有什么区别呢？本篇文章就简单介绍下。 二、开发模式 2.1 简介 开发模式(mode: development)顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范
webpack中Development和Production模式的区分打包
weixin_30443813的博客
05-01 474
当我们在开发一个项目的时候，我们一般用development这个环境进行项目的开发，在这个环境下，webpack使用dev-server，帮我们启用一个服务器，然后这个服务器里面还集成了一些，比如hmr这样的特性，只要我更改了代码，他会帮我们重新打包，然后我们代码的内容会实时的展示在对应的页面上，所以开发环境上，development这样的模式非常的方便，但是一旦我们的代码开发完成了，我...
简单封装webpack中development和production两种模式的切换
bamnyt的博客
11-22 880
简单封装webpack中development和production两种模式的切换 自己写的代码在webpack的development模式下调试好之后想换成production模式生成相应这文件，这使得要改相当的代码或者写多一份webpack.config.js文件，出于方便，就封装了一个简单的模板。 相关packge的支持 webpack webpack-cli webpack-dev-se...
webpack开发环境和生产环境的深入理解
10-17
本文将详细探讨如何在Webpack中设置开发环境和生产环境，并解释相关的配置策略。 #### 二、环境区分原理 在了解具体的配置之前，我们需要先明白如何在Webpack中区分开发环境与生产环境。这是通过命令行传递参数...
webpack(系列五)：development和 production 模式的区分打包
yu923023913的博客
06-08 1192
为什么要区分打包呢？是因为如果开发环境的配置和生产环境的配置都放在一个文件里，那么配置的多，想要去切换这两种模式的打包，就显得很麻烦了，所以，建议把他们区分开来 1. 首先在项目根目录下创建三个文件存放到build文件夹 webpack.common.js 存放两个模式下的公共配置 webpack.dev.js 存放development模式下的配置 webpack.prod.js 存放production模式下的配置 2.webpack.co
webpack --env.production和--mode =“ production”有什么区别
九段刀客的博客
10-04 3428
在webpack.config.js中判断环境的时候要使用函数的方式导出， "scripts": { "serve": "webpack-dev-server --mode development --progress --open", "build": "webpack --env.production --mode production --progress" }, module.exports = function (env, argv) { console.log(env, argv)
【webpack】快速笔记13 -- development和production模式的区分打包
Umbrella_Um的博客
09-08 411
回顾 上一篇我们进行配置Tree Shaking时是不是分两种环境进行配置分析，每次我们都需要改 webpack.config.js 里面的代码，现在能不能将这两个环境的代码都有自己的script启动命令，这样我们就可以通过对应输入命令行代码启动对应的环境的webpack了 分离开发和生产配置 分离： 根据上面说的问题，那我们可以新建两个webpack配置，一个为webpack.dev.js，另一...
webpack的development和production模式
qq_43157227的博客
09-21 609
webpack的development和production打包模式学习以及打包运行的常见问题
webpack开发模式与生产模式（webpack --mode=development/production“, ）
最新发布
2301_81726198的博客
08-22 471
（生产模式）是两种常见的构建环境配置，主要区别体现在构建速度、代码优化和调试支持等方面。在webpack配置文件中通过。
webpack4系列笔记之（8）development 和production模式区分打包
qq_42744920的博客
06-12 1144
development 和production模式区分打包
webpack Develoment 和 Production 模式的打包
酒馆不打烊
03-21 532
Tree Shaking Tree Shaking 在打包过程把声明但不引入的函数过滤掉，减少体积 只支持ES Module 模式，不支持require()模式， 在webpack 开发环境下加入optimization模式 optimization: { usedExports: true } 还要在package.json 中加入 sideEffects属性 可赋值为false...
webpack 开发模式管理 Development
weixin_34161032的博客
03-17 341
webpack 开发模式管理 Development GitHub 学习 Demo。 接下来将一些开发时的 webpack 配置。 warnning ： 本指南中的工具仅用于开发，请避免在生产中使用它们！ 先把 mode 属性变为 development. # webpack.config.js const path = require('path'); const HtmlWebp...
development 和 production 模式的区别
大脸猫~
05-07 6305
webpack中两种开发模式development 和 production 的区分打包 当我们在开发一个项目的时候，一般用development这个环境进行项目的开发，在这个打包环境下，webpack我们使用了devserve，可以帮我们起一个服务器，这个服务器里面还集成了一些HTML这样的特性，只要更改了代码，会帮我们重新打包，然后代码的内容会实时的展示在服务器对应的网页上。所以在开发环境下使...
复习webpack4之production与development区分打包
weixin_33913377的博客
05-05 620
之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。 这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。 1.如何区分打包 我们在prod...
webpack生产模式配置
jieyucx的博客
06-13 2210
生成模式（production mode）是指在开发完成后将代码部署到生产环境中运行的模式，通常需要进行代码压缩、优化、合并，以减少文件大小和请求次数，提高页面加载速度和运行效率。开发模式（development mode）则是指在开发过程中使用的模式，通常需要对代码进行调试、热更新等操作，以提高开发效率和代码质量。在开发模式下，通常不需要进行代码优化和压缩，可以保留源代码的完整性，以便于调试和排查问题。
01_Webpack基础（开发模式）
zyq的博客
05-03 739
开发模式：仅能编译 JS 中的ES Modle语法生产模式：能编译 JS 中的ES Modle语法，和压缩 JS 代码。
Webpack 测试实践：深入理解和应用
6. **模式(mode)**：在4.x版本后，Webpack引入了模式(mode)的概念，它允许开发者在开发环境(development)和生产环境(production)之间切换构建配置。这样，可以分别利用开发环境的调试工具和生产环境的优化工具。 7....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值