webpack差异化打包NormalModuleReplacementPlugin

最新推荐文章于 2024-07-17 22:26:57 发布
最新推荐文章于 2024-07-17 22:26:57 发布
阅读量3.1k 收藏
点赞数
分类专栏： webpack 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31290307/article/details/105277903
版权

项目需求需要根据不同的使用场景进行差异话打包，一些文件分属不同的包使用。
我这里是Vue CLI项目主要使用webpack的NormalModuleReplacementPlugin插件。将route文件，提供你需要的版我这里用route/index_Version_A.js和route/index_Version_B.js替换。在main.js和需要引入route/index.js的地方引入route/index__APP_TEST。在webpack打包是会根据环境变量去分别加载不同的route文件。你可以在route文件中加载对应需要的组件就基本实现需求。同样的也可以对其他的文件进行替换，eg: test/index.vue =>test/index_Version_A.vue和test/index_Version_B.vue。

configureWebpack: config => {
   
	const appTarget = process.env.NODE_ENV === 'dev'?
最低0.47元/天 解锁文章
取名好樊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack之不同模式的区分打包
Meskjei的博客
08-28 1056
文章目录引入初步的区分打包更进一步的区分打包 引入 Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。 例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。 用过create-react-app的人肯定都知道...
webpack中normalModuleReplacementPlugin
Mr_Yan的博客
10-31 950
就一个替换问题 详细传送门
webpack 使用 NormalModuleReplacementPlugin 项目差异化打包
Lv骚年
02-21 1979
情景：项目中包含多个模块，不同场景需要打包的模块不同，需要设置对应命令进行差异化打包。 解决方案： 使用NormalModuleReplacementPlugin 插件判断打包场景，引入需要的模块文件 1：vue.config.js 中使用插件，设置识别字符串‘-APP_TARGET’ plugins: [ new webpack.NormalModuleReplacementPlugin( /(.*)-APP_TARGET(\.*)/, function(resource) { ..
vue-cli4NormalModuleReplacementPlugin同一项目不同差异化打包不同文件
qq_34507902的博客
02-14 261
打包
webpack模块热替换教程
chiuwingyan的博客
05-03 1143
我们用vue或者react脚手架时，我们会发现，我们修改代码时，浏览器不会刷新，更改对应的部分会自动刷新，这就是模块热替换。下面主要介绍webpack和react-hot-loader。webpack模块热替换package.json 增加 --hot"start": "webpack-dev-server --config webpack.dev.config.js --color --prog...
一篇文章读懂webpack如何打包
朝花夕拾的博客
11-21 6132
webpack是打包命令。如果我们不指定它的后继参数，其实也能实现打包。但是有一些小的限制。 webpack如果不指定输入和输出，那么默认的打包文件就是./src/index,默认的输出路径是./dist/index.js 第一种是通过build，有点长。另外一个是通过webpack配置文件，这两个没有太大的区别，干的都是同一件事情，只是用了不同的方法。 如果用第一种方法，在build中，需要写配置节，给全参数。 打包命令的表达式：webpack源文件路径-o输出文件路径--（模式） ...
webpack-dashboard打包可视化插件
12-27
**Webpack Dashboard：前端打包的可视化增强** Webpack，作为现代JavaScript应用程序的主流模块打包工具，它能够将各种资源，如JavaScript、CSS、图片等，高效地整合在一起，形成适合浏览器加载的静态资源。然而，...
详解webpack模块化管理和打包工具
11-27
Webpack 是一个强大的前端资源模块化管理和打包工具，它能够将分散的模块按照依赖关系整合成符合生产环境部署的前端资源。Webpack 的核心理念是“万物皆可模块化”，这意味着不仅 JavaScript，还包括 CSS、图片、...
Webpack 完整注释 打包教程
03-26
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将各种资源（如JavaScript、CSS、图片等）视为模块，并根据依赖关系进行静态分析，然后打包成一个或多个浏览器可识别的JavaScript文件。这个“Webpack 完整...
webpack1-打包流程
01-20
Webpack 打包流程的起点通常是初始化一个新的Node.js项目。你可以通过运行`npm init -y`来快速生成`package.json`文件。这个文件包含了项目的元数据，如项目名称、版本、作者等，同时也用于定义项目的脚本命令。 **...
webpack组织模块打包Library的原理及实现
08-27
Webpack 是一个流行的模块打包工具，它能够处理 JavaScript 和相关资源，将其打包成可部署的静态文件。在开发库（Library）时，与打包单一应用程序不同，我们通常希望生成的代码可以作为一个模块导入到其他项目中。...
Vue根据不同的路由文件实现打包差异化
02-15 1036
　　有些时候我们经常一个项目中开发不同的功能，有可能一个前端项目中夹杂着不同系统之间的需求，最后打包发布的时候经常会将与项目不相关的代码一同打包进去，实际来讲这种操作也是不严谨的。那有没有办法可以根据某些不同的配置来实现打包的结果不同呢？答案是肯定的。在介绍下边的方法之前，希望读者有一些关于webpack以及Vue router的概念和应用，废话不多说，开始介绍。 　　首先来讲webp...
前端差异化项目合并打包
weixin_34405557的博客
04-13 755
前言 以前实现差异化或者说项目上线之前会有一个项目的异化合并打包。这种事情以前一般都是运维或者是后端同事去干，用的一般是 ant 或者是自己写个脚本什么的，在这里我们就不说了【其实是没有玩过】。但是这样做的缺点也是很明显，缺点如下： 上线之前合并的项目前端人员没法看到或者说要发布到测试环境后才可以看到，对前端哥哥来说实在是不友好，当然了你...
【零基础学习Webpack】webpack不同环境打包
球球博客
10-22 1088
Webpack区分环境打包 1、通过环境变量区分 webpack --env.production webpack.config.js中判断env 打包命令：webpack --env=production module.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 } } 2、通过不同的配置文件区分 cnpm install webpack-merge -D 创
webpack优化系列一：webpack不同环境打包配置
hyduan_h5的博客
01-10 4639
前言 webpack的env一般分为develop、test以及production，每个环境可能所需配置都不一样，比如请求的后端服务器等等 若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失 故而，建议将webpack区分不同环境单独配置好，打包时使用不同命令即可 一：环境配置 新建.env.dev文件 NODE_ENV = 'dev' VUE_APP_BASE_UPL='开发环境api' // 其他所需配置都可在此定义 新建.env.test文件 NODE_ENV = 't
webpack 按需打包vue项目，根据不同业务模块打包成不同包
学而时习之，不亦说乎。
05-19 6143
需求 开发的项目需要每个页面打包成一个项目，给第三方平台上线 实现原理 把router.js分成好几个不同的路由。 问题： 入口main.js引用了router.js 也要每次都切换router.js来打包，这样main.js的代码并不好维护。 解决方案 1.我们可以同样把main.js 拆成 main_page1.js 和 main_page2.js,注意不同的main.js里面引用不同的router.js，然后使用webpack的特性mode来读取不同的main.js 2.首先在package.json
Webpack详解
最新发布
警警的博客
07-17 1735
Webpack 是一个现代 JavaScript 应用程序的。它允许开发者将项目中的资源（如 JavaScript、CSS、图片等）视为，通过这些模块之间的，将它们成一个或多个 bundle（捆绑包），这些 bundle 可以在浏览器中加载和执行。Webpack 提高了开发效率，简化了前端项目的构建流程，是现代前端开发不可或缺的工具之一。
Webpack：模块打包工具详解与核心原理
Webpack 是一个强大的模块打包工具，它最初被设计用于将多个 JavaScript 文件和资产合并成一个大文件，从而实现在浏览器中使用模块化 JavaScript。其核心功能是模块打包，使得开发者能够构建复杂的前端应用，同时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值