webpack介绍使用

介绍

因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改。

因此,需要用webpack单独打包指定文件。

CommonsChunkPlugin

module.exports = {entry: {app: APP_FILE // 入口文件},output: {publicPath: './dist/', //输出目录,index.html寻找资源的地址path: BUILD_PATH, // 打包目录filename: '[name].[chunkhash].js', // 输出文件名chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件}
}

先说一下publicPath , 这边有一个注意的点,即路径写成 ./dist 相对路径。如果写成/dist/这种绝对路径,有一个弊端是当nginx把前端的包没有放在根目录的情况下,index.html会访问资源失败。

因此推荐写成相对路径,但是当使用相对路径时,有会存在一个潜在的问题,即项目本身的路由访问如果是HTML5模式,而不是使用hash时(路由上有一个#号),那么项目一样会部署失败。

angular,react都会有这样的问题,vue没用过,应该类似。此时的解决办法是,在index.html的head中添加base标签,即:

<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"/><base href="/">
</head>

webpack本身基于模块化,因此大多数情况下,我们仅需要一个入口文件就可以搞定。而针对本次需求,需要在app,这个入口之外再添加一个入口文件。即:

 entry: {app: APP_FILE // 入口文件ip: IP_FILE
},

仅这样对webpack配置之后,dist文件会成功打出app.xxx.js及ip.xxx.js,但是打包出的项目还是会报错,解决办法是:维持IP的入口文件不变,但是把它当作commonChunk来处理。即在plugins中加入:

new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),

这样保证 优先加载ip.xxx.js,避免报错。

缺点:这样打包有一个很明显的缺点,即是打包出的文件是压缩的,不方便对文件进行二次修改。(没有找到解决压缩的办法)

CopyWebpackPlugin

最终解决办法,还是通过让ip.js这个文件脱离项目的模块化,然后在index.html中单独引用。(这是最开始就想到的解决办法,但并不是自己想要的解决方案,但无奈认知有限,没有解决掉之前的问题)。

解决流程:
首先在webpack引入CopyWebpackPlugin , 配置代码:

new CopyWebpackPlugin([{from: './src/config/ip.js', to: 'ip.js'},
])

在index.html中单独引入script标签,注意要配置一个随机后缀,即:

<script>document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>

防止ip.js因为缓存导致问题。

以上,就解决了webpack单独打包指定js的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ES6复习笔记】Class类(15)

介绍 ES6 提供了更接近传统语言的写法&#xff0c;引入了 Class&#xff08;类&#xff09;这个概念&#xff0c;作为对象的模板。通过 class 关键字&#xff0c;可以定义类。基本上&#xff0c;ES6 的 class 可以看作只是一个语法糖&#xff0c;它的绝大部分功能&#xff0c;…

找到一个linux静态库动态库的好资料.2

# 正文 继续整理从这个页面学到的东西&#xff1a;https://tldp.org/HOWTO/Program-Library-HOWTO 这一篇主要参考这俩&#xff1a; https://tldp.org/HOWTO/Program-Library-HOWTO/introduction.html https://tldp.org/HOWTO/Program-Library-HOWTO/static-libraries.html 这…

uniapp实现为微信小程序扫一扫的功能

引言 随着微信小程序的快速发展,越来越多的开发者开始关注和学习微信小程序的开发。其中,微信小程序的扫一扫功能是非常常用且实用的功能之一。通过扫描二维码,用户可以获取到相关的信息或者实现特定的功能。 正文 在过去,开发者需要使用微信开发者工具以及相关的开发文档…

中科岩创边坡自动化监测解决方案

行业现状 由于边坡不稳定性因素&#xff0c;可能会造成斜坡上的岩土体沿着某个面不均匀向下向外滑动&#xff0c;形成滑坡&#xff1b;陡峭山坡上岩土体在重力作用下&#xff0c;发生陡然倾落运动&#xff0c;造成崩塌&#xff1b;在沟谷或山坡上产生的夹带大量泥沙、石块等固体…

uniapp使用live-pusher实现模拟人脸识别效果

需求&#xff1a; 1、前端实现模拟用户人脸识别&#xff0c;识别成功后抓取视频流或认证的一张静态图给服务端。 2、服务端调用第三方活体认证接口&#xff0c;验证前端传递的人脸是否存在&#xff0c;把认证结果反馈给前端。 3、前端根据服务端返回的状态&#xff0c;显示在…

Docker【初识Docker】

目录 为什么会出现Docker这门技术喃&#xff1f; 应用开发和部署的困境 容器技术的先兆 Docker 的出现&#xff1a;简化容器化 Docker 技术的关键创新&#xff1a; Docker 的广泛应用和变革 什么是 Docker&#xff1f; Docker的历史 早期背景&#xff1a;容器化和虚拟化…

探寻 OneCode 核心优势:MVVM 进阶与前后端协同之魅

在当今的软件开发领域&#xff0c;高效、可维护且功能强大的架构是开发者们不懈追求的目标。OneCode 凭借其独特的增强版 MVVM 架构、前后端一体化特性&#xff0c;以及创新的技术如 OneCode DSM&#xff08;Domain-Specific Modeling&#xff0c;领域特定建模&#xff09;、视…

FFmpeg来从HTTP拉取流并实时推流到RTMP服务器

当使用FFmpeg来从HTTP拉取流并实时推流到RTMP服务器时&#xff0c;你可以使用以下命令&#xff1a; ffmpeg -i http://输入流地址 -c:v copy -c:a copy -f flv rtmp://RTMP服务器地址/应用名称/流名称 这是一个基本的命令示例&#xff0c;其中&#xff1a; - -i http://输入流地…

骑砍2霸主MOD开发(26)-Mono脚本系统

一.游戏启动流程 <1.启动器Launcher 运行TaleWorlds.MountAndBlade.Launcher.exe启动C#程序Program,完成MOD列表页面的加载. public class Program {public static void Main(string[] args){#加载启动器GUI界面ResourceDepot resourceDepot = new ResourceDepot();resourc…

网络安全检测

实验目的与要求 (1) 帮助学生掌握木马和入侵的防护和检测方法、提高学习能力、应用能力和解决实际问题的能力。 (2) 要求学生掌握方法, 学会应用软件的安装和使用方法, 并能将应用结果展示出来。 实验原理与内容 入侵检测是通过对计算机网络或计算机系统中若干关键点收集信…

24.12.27 SpringMVCDay02

enctype必须是 multipart/form-data <form action"/mvc/book/doUpload1" method"post" enctype"multipart/form-data"><p><input type"file" name"img_url"></p><p><input type"subm…

Maven核心概念总结

Maven 介绍 Maven 官方文档是这样介绍的 Maven 的&#xff1a; Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a projects build, reporting and documentation from a ce…

Unity 读Excel,读取xlsx文件解决方案

Unity读取表格数据 效果&#xff1a; 思路&#xff1a; Unity可以解析Json&#xff0c;但是读取Excel需要插件的帮助&#xff0c;那就把这个功能分离开&#xff0c;读表插件就只管读表转Json&#xff0c;Unity就只管Json解析&#xff0c;中间需要一个存储空间&#xff0c;使用…

PyQt + OpenCV综合训练

一、PyQt OpenCV 图像处理应用设计 创建一个 PyQt 应用程序&#xff0c;该应用程序能够&#xff1a; ①使用 OpenCV 加载一张图像。 ②在 PyQt 的窗口中显示这张图像。 ③提供四个按钮&#xff08;QPushButton&#xff09;&#xff1a; - 一个用于将图像转换为灰度图 - …

掌握Docker命令与Dockerfile实战技巧:快速构建高效容器化应用

1. 介绍 Docker 是现代开发和运维的必备工具&#xff0c;集成了容器技术的优势。本文将记录 Docker 的常用指令&#xff0c;并会随着使用经验的积累进行不定期更新。 2. 常用命令 2.1 启动容器&#xff08;前台交互模式&#xff09; docker run --privileged --volume /hom…

React中最优雅的异步请求

给大家分享在React19中使用useSuspense处理异步请求为什么是被认为最优雅的解决方案 一. 传统方案 解决异步请求的方案中&#xff0c;我们要处理至少两个最基本的逻辑 正常的数据显示数据加载的UI状态 例如&#xff1a; export default function Index(){const [content, …

数据库高安全—openGauss安全整体架构安全认证

openGauss作为新一代自治安全数据库&#xff0c;提供了丰富的数据库基础安全能力&#xff0c;并逐步完善各类高阶安全能力。这些安全能力涵盖了访问登录认证、用户权限管理、审计与追溯及数据安全隐私保护等。本章节将围绕openGauss安全机制进行源码解读&#xff0c;以帮助数据…

linux-23 文件管理(一)创建文件touch,stat

那接下来看看文件的创建和删除&#xff0c;那我们怎么去创建一个文件&#xff1f;各种方式都能实现&#xff0c;当然&#xff0c;这里先说一说&#xff0c;就像mkdir创建空目录一样&#xff0c;我们如何创建一个空文件&#xff1f;创建空文件其实很简单&#xff0c;有一个命令歪…

Linux 基本指令

目录 1.常见指令 1.1 ls指令 1.2 pwd指令 1.3 cd指令 1.4 touch指令 1.5 mkdir指令 1.6 rm和rmdir指令 1.7 man指令 1.8 cp指令 1.9 mv指令 ​编辑 1.10 cat指令 1.11 more指令 1.12 less指令 1.13 head指令 1.14.tail指令 1.15 时间相关的指令 1.16 cal…

金蝶V10中间件的使用

目录 环境准备搭建过程配置修改应用部署 环境准备 Linux内核服务器JDK1.8安装包&#xff1a;AAS-V10.zip程序包&#xff1a;***.war 搭建过程 将安装包上传至服务器opt目录下&#xff0c;官方给定的默认服务主目录为“/opt/AAS-V10/ApusicAS/aas/”&#xff1b;解压安装包(解…