webpack分离开发依赖、发布依赖的配置09

最新推荐文章于 2022-06-03 09:36:30 发布
最新推荐文章于 2022-06-03 09:36:30 发布
阅读量274 收藏 1
点赞数
分类专栏： Webpack学习笔记 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44836362/article/details/116447932
版权
该博客介绍了如何在webpack中分离开发和发布依赖，包括创建build文件夹，建立base.config.js、dev.config.js和prod.config.js，使用webpack-merge合并配置文件，修改package.json的脚本命令以区分开发和发布，以及设置output地址到'/dist'，并测试了开发和发布的效果。
摘要由CSDN通过智能技术生成

webpack开发时依赖、发布时依赖配置分离

创建配置文件结构，并对webpack.config.js文件进行抽离

1. 创建build文件夹（存放配置文件）、base.config.js（存放公共依赖）、dev.config.js（存放开发时依赖）、prod.config.js（发布时依赖）

在这里插入图片描述

2. 抽离webpack.config.js文件到base.config.js、dev.config.js、prod.config.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

分别合并开发、发布所需配置文件

1. 为了合并配置文件，需要安装webpack-mergenpm install webpack-merge --save-dev

最低0.47元/天 解锁文章
钢铁直女.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的配置和插件的使用介绍代码
12-25
1. `entry`：入口配置，指定应用的主文件，Webpack 会从这里开始构建模块依赖图。 2. `output`：输出配置，定义打包后的文件输出位置以及文件名格式。 3. `module`：模块配置，用于定义如何处理不同类型的模块，例如...
详解Webpack抽离第三方类库以及common解决方案
10-15
主要介绍了详解Webpack抽离第三方类库以及common解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack 打包时排除某些依赖模块
我灰灰凭啥输
04-01 2078
防止将某些 import 的包打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖 例如，从 CDN 引入 jQuery，而不是把它打包： //index.html <script src="https://code.jquery.com/jquery-3.1.0.js"></script> //vue.config.js configureWebpack: { name: name, resolve: { alia.
webpack代码分割技巧
Yang Yong 的博客
09-11 5255
1. 代码中定义分割点 webpack支持在代码中定义分割点。分割点指定的模块只有在真正使用时才加载，可以使用webpack提供的require.ensure语法: $('#okButton').click(function(){ require.ensure(['./foo'], function(require) { var foo = require('./foo'); ...
webpack5
weixin_38255079的博客
02-16 1173
五个概念 entry：哪个文件为入口起点开始打包 output：输出的资源到哪里去，叫什么名字 loader：翻译官，webpack只能处理js代码，其他要交给loader来处理。 plugins，插件，执行范围更广的任务，如压缩 mode。开发模式(development)：本地可以运行就可以，生产模式(production)：代码优化上线 执行打包 1.纯命令行 # 安装。不加版本号默认安装最新版本 npm install webpack webpack-cli --save-dev #webp
webpack5学习与实战-（七）-代码分离
weixin_42349568的博客
02-16 618
到目前为止，我们打包出来的文件，只有一个bundle.js这么一个js文件。 那么如果项目大了，这个js则会变得非常大！这会导致首屏加载的时间变得非常长。而其中很多代码并不是立马就需要使用的，这样直接全部引入很浪费资源。所以我们可以让它代码分离，按需引入。 一，代码分离的方法概述 第一种：手动配置entry文件 设置多个入口文件，但是这种方法有个问题，当多个入口文件有共享的代码，这些共享德 代码则会被重复打包。 第二种方法：入口进行配置 在入口进行配置，使用Entry dependencies或者Split
webpack多页面开发实践
08-28
Webpack 多页面开发实践 Webpack 是一款强大的模块打包工具，它可以处理 JavaScript、CSS、HTML、图片等各类资源，实现模块化管理。随着前端技术的发展，单页面应用（SPA）成为了主流，但多页面应用（MPA）依然在很...
电商前端，前后台分离，webpack开发.zip
最新发布
03-03
《电商前端：前后台分离与Webpack开发详解》 在当今的互联网时代，电商网站的前端开发扮演着至关重要的角色，它直接决定了用户的交互体验。本文将深入探讨电商前端的开发模式，尤其是前后台分离和Webpack的运用，...
webpack多页配置
08-10
Webpack 是一个流行的模块打包工具，尤其在JavaScript开发中被广泛使用。它允许开发者将各种资源，如JavaScript、CSS、图片等，打包成优化过的静态文件，以便于部署到生产环境。"webpack多页配置"意味着我们需要处理...
基于webpack的开发模版
08-07
- 合理划分配置，如开发配置和生产配置分离。 - 保持配置文件的可读性和维护性，避免过度配置。 以上是对"基于webpack的开发模版"的详细解读，涵盖了Webpack的核心概念、项目结构、配置文件、开发脚本以及优化...
webpack打包APP的后端地址处理
weixin_30388677的博客
01-10 290
PC端我们用webpack打包，只需要写相对路径，发布的时候和后端接口在同一目录下即可。 但是做过APP或者混合开发的同学都知道，APP不需要发布的，如果后端地址还是用相对路径的话，可想而知，调用后端接口的时候肯定是访问不到的。 原因就是APP需要写死后端的地址。至于怎么写有多种方法。 可以在接口上直接写完整路径，或者判断打包环境选择是否加前缀。 还有一种比较简单的方法就是我们现在用的是a...
vue 打包完后的项目配置接口地址
榴莲不好吃的专栏
06-25 9590
1.在根目录新建一个environment.js文件. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' &...
webpack（八）代码分离
Yushia的博客
04-13 1754
我们的 js 都是打包输出到一个文件中的，当内容越来越多的时候，会导致单个文件体积十分巨大，所以我们就需要对代码进行分割，将一个巨大的文件，分割成多个中小型文件，然后可以按需加载或并行加载这些文件 代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle，以及控制资源加载优先级，如果使用合理，会极大缩减加载时间。 常用的代码分离方法有三种： 入口起点：使用 entry 配置手动地分离代.
vue项目webpack构建优化-提取公共依赖库dll
HRM2454的博客
11-02 1417
背景 目前前端发展已经到了一个工程化比较成熟的阶段，前端的职责也越来越重，大多数的开发者选择使用webpack构建项目。当我们的项目越来越大，依赖包越来越多，那么构建速度会非常慢。 解决方案 我们可以将固定的依赖包（如vue,element-ui,axios等）抽离出来，不在每次启动项目时重新构建。这一操作我们可以借鉴webpack新出的dll这个概念。 Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。 ..
webpack4知识整理（七） 代码抽离
05-03 394
这里对optimization中的代码抽离配置进行简单说明 首先看一下配置条件，有多个入口文件，入口文件分别对公共的JS文件进行调用，为了避免重复打包，还可以作为缓存文件来优化 在src目录下index.js和other.js文件分别对util1.js和util2.js...
webpack5-模块共享方案
gentleman_sh的博客
04-13 2460
目录一、引用1.1、npm包1.2、微前端1.3、其它方案二、模块联邦（module Federation）三、实践3.1、REMOTE1配置3.2、HOST宿主配置3.3、跨技术栈3.3.1、REMOTE2配置四、依赖共享五、总结 一、引用 在日常开发中，我们经常会有一种感觉，这个组件我在其它项目改了，又要copy一次？在协同开发的过程中磕磕碰碰，皆为了结果尽善尽美，手段无所不用其极，CV大法更是用的出神入化，后面发现副作用极其明显，项目杂乱、代码冗余等问题，尽管有相应的规范也难以约束人性，我们无时无刻不
qiankun 如何提取出公共的依赖库
Lyrelion的博客
06-03 3383
qiankun 如何提取出公共的依赖库
webpack的基本配置和优化代码
02-28
Webpack是一个用于打包前端应用程序的工具，可以将多个模块打包成一个或多个文件，同时还支持代码分离、模块化、压缩等功能。下面是Webpack的基本配置和优化代码的说明： 1. 基本配置 （1）entry：入口文件，Webpack会从该文件开始递归解析依赖，生成打包后的文件。 （2）output：输出文件配置，指定打包后生成的文件路径和名称。 （3）module：模块加载器配置，用于加载各种类型的文件，如js、css、图片等。 （4）plugins：插件配置，用于扩展Webpack功能，如压缩代码、提取公共模块、生成HTML模板等。 （5）devServer：开发服务器配置，可以自动编译代码并提供热更新等功能。 （6）resolve：模块解析配置，用于配置模块的搜索路径、别名等。 2. 优化代码 （1）使用Tree Shaking：Tree Shaking是Webpack 2引入的功能，用于去除无用的代码。只有被使用的代码才会被打包进最终的文件。 （2）使用Code Splitting：将代码拆分成多个块，按需加载，可以提高页面加载速度。 （3）使用动态导入：使用import()函数动态加载代码，可以根据需要加载不同的模块，提高性能。 （4）使用缓存：使用缓存可以避免重复打包已经打包过的代码，提高打包速度。 （5）使用异步加载：异步加载可以提高页面加载速度，特别是在处理大型应用程序时更为重要。 （6）使用压缩插件：压缩代码可以减小文件大小，提高加载速度。 （7）使用静态资源CDN：使用CDN可以将静态资源分布到多个服务器上，提高访问速度，减少服务器负载。 总之，通过合理的配置和优化，可以大大提高Webpack的性能和效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值