webpack差异化打包NormalModuleReplacementPlugin

最新推荐文章于 2024-06-06 06:17:27 发布

取名好樊

最新推荐文章于 2024-06-06 06:17:27 发布

阅读量3.2k

点赞数

分类专栏： webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/qq_31290307/article/details/105277903

版权

本文介绍了如何利用 Vue CLI 项目中的 Webpack 插件 NormalModuleReplacementPlugin 进行差异化打包，以满足不同场景的需求。通过替换 route 文件，如 route/index_Version_A.js 和 route/index_Version_B.js，根据环境变量动态加载不同版本的路由配置。同时，该方法也可应用于其他文件，例如将 test/index.vue 替换为 test/index_Version_A.vue 和 test/index_Version_B.vue，以实现灵活的打包策略。

摘要由CSDN通过智能技术生成

项目需求需要根据不同的使用场景进行差异话打包，一些文件分属不同的包使用。
我这里是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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

取名好樊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Webpack之不同模式的区分打包

Meskjei的博客

08-28

1090

文章目录引入初步的区分打包更进一步的区分打包引入 Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。用过create-react-app的人肯定都知道...

webpack自动化打包构建工具

频繁记录

08-26

508

webpack自动化打包构建工具

参与评论您还未登录，请先登录后发表或查看评论

webpack中normalModuleReplacementPlugin

Mr_Yan的博客

10-31

989

就一个替换问题详细传送门

webpack 使用 NormalModuleReplacementPlugin 项目差异化打包

Lv骚年

02-21

2118

情景：项目中包含多个模块，不同场景需要打包的模块不同，需要设置对应命令进行差异化打包。解决方案：使用NormalModuleReplacementPlugin 插件判断打包场景，引入需要的模块文件 1：vue.config.js 中使用插件，设置识别字符串‘-APP_TARGET’ plugins: [ new webpack.NormalModuleReplacementPlugin( /(.*)-APP_TARGET(\.*)/, function(resource) { ..

vue-cli4NormalModuleReplacementPlugin同一项目不同差异化打包不同文件

qq_34507902的博客

02-14

323

打包

Vue根据不同的路由文件实现打包差异化

02-15

1105

　　有些时候我们经常一个项目中开发不同的功能，有可能一个前端项目中夹杂着不同系统之间的需求，最后打包发布的时候经常会将与项目不相关的代码一同打包进去，实际来讲这种操作也是不严谨的。那有没有办法可以根据某些不同的配置来实现打包的结果不同呢？答案是肯定的。在介绍下边的方法之前，希望读者有一些关于webpack以及Vue router的概念和应用，废话不多说，开始介绍。　　首先来讲webp...

详解webpack模块化管理和打包工具

11-27

Webpack 是一个强大的前端资源模块化管理和打包工具，它能够将分散的模块按照依赖关系整合成符合生产环境部署的前端资源。Webpack 的核心理念是“万物皆可模块化”，这意味着不仅 JavaScript，还包括 CSS、图片、...

webpack将js打包后的map文件详解

11-26

类似于这样的map文件由webpack自动生成参数： devtool: ‘#eval-source-map’,//...以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

webpack打包非模块化js的方法

12-04

本文主要记录了非模块化js如何使用webpack打包模块化打包实现方式 webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。 bar.js export default function bar() { // } foo.js import ...

一篇文章读懂webpack如何打包

朝花夕拾的博客

11-21

6168

webpack是打包命令。如果我们不指定它的后继参数，其实也能实现打包。但是有一些小的限制。 webpack如果不指定输入和输出，那么默认的打包文件就是./src/index,默认的输出路径是./dist/index.js 第一种是通过build，有点长。另外一个是通过webpack配置文件，这两个没有太大的区别，干的都是同一件事情，只是用了不同的方法。如果用第一种方法，在build中，需要写配置节，给全参数。打包命令的表达式：webpack源文件路径-o输出文件路径--（模式） ...

前端差异化项目合并打包

weixin_34405557的博客

04-13

793

前言以前实现差异化或者说项目上线之前会有一个项目的异化合并打包。这种事情以前一般都是运维或者是后端同事去干，用的一般是 ant 或者是自己写个脚本什么的，在这里我们就不说了【其实是没有玩过】。但是这样做的缺点也是很明显，缺点如下：上线之前合并的项目前端人员没法看到或者说要发布到测试环境后才可以看到，对前端哥哥来说实在是不友好，当然了你...

前端项目模块化的实践2：使用 Webpack 打包基础设施代码

denggua0627的博客

08-28

174

以下是关于前端项目模块化的实践，包含以下内容：搭建 NPM 私有仓库管理源码及依赖；使用 Webpack 打包基础设施代码；使用 TypeScript 编写可靠类库使用 TypeScript 的收益使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第2部分现状实际项目远远比示例使用的 myGreeting 复杂，比如为了提高可维护性...

差异化打包：控制是否cdn资源引入

qq_31290307的博客

04-02

220

需求：根据环境变量不同控制是否cdn资源引入。项目背景：vue lic 3 主要是使用webpack配置属性externals来实现。externals属性会从输出的 bundle 中排除依赖。我们需要在package.json中依然添加入依赖。然后通过环境变量动态控制external属性。同时在public/index.html中通过jsp 动态控制cdn加载。代码： package.js...

代码阅读-》公司使用的 webpack 构建过程中修改模块请求解析方式

最新发布

weixin_43601701的博客

06-06

341

在我们的项目中，遇到一个问题：代码中某些模块的路径在文件系统中不存在，但构建后的应用仍然可以正常运行。以下是相关代码段和配置的详细分析。通过使用，我们可以根据环境变量动态修改模块请求路径。在本例中，根据的值，被替换为有效的路径。这种方法提高了应用的配置灵活性和可维护性，特别是在多环境部署中非常有用。

webpack模块热替换教程

chiuwingyan的博客

05-03

1166

我们用vue或者react脚手架时，我们会发现，我们修改代码时，浏览器不会刷新，更改对应的部分会自动刷新，这就是模块热替换。下面主要介绍webpack和react-hot-loader。webpack模块热替换package.json 增加 --hot"start": "webpack-dev-server --config webpack.dev.config.js --color --prog...

前端构建效率优化之路

weixin_66128399的博客

02-18

1016

本文不会详细描述 Webpack 的构建原理，我们只需要大致知道，Webpack 的构建流程，主要时间花费在递归遍历各个入口文件，并基于入口文件不断寻找依赖逐个编译再递归处理的过程，每次递归都需要经历 String->AST->String 的流程，然后通过不同的 loader 处理一些字符串或者执行一些 JavaScript 脚本，由于 NodeJS 单线程的特性以及语言本身的效率限制，Webpack 构建慢一直成为它饱受诟病的原因。阶段的优化，涉及到环境准备，镜像拉取，依赖的安装。

webpack配置hot是否需要配置HotModuleReplacementPlugin

皮蛋很白的博客

07-17

9344

webpack配置hot是否需要配置HotModuleReplacementPlugin webpack官方文档（devserverhot）中介绍，使用hmr的时候，需要满足两个条件：配置devServer.hot为true 配置webpack.HotModuleReplacementPlugin插件 Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-

webpack优化系列一：webpack不同环境打包配置

hyduan_h5的博客

01-10

4815

前言 webpack的env一般分为develop、test以及production，每个环境可能所需配置都不一样，比如请求的后端服务器等等若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失故而，建议将webpack区分不同环境单独配置好，打包时使用不同命令即可一：环境配置新建.env.dev文件 NODE_ENV = 'dev' VUE_APP_BASE_UPL='开发环境api' // 其他所需配置都可在此定义新建.env.test文件 NODE_ENV = 't

【零基础学习Webpack】webpack不同环境打包

球球博客

10-22

1147

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 创