摘要：背景最近接到一个需求，因为不确定打出的前端包所访问的后端，需要对项目中配置文件多带带拿出来，方便运维部署的时候对做修改。因此，需要用多带带打包指定文件。而针对本次需求，需要在，这个入口之外再添加一个入口文件。
背景
最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件多带带拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack多带带打包指定文件。
CommonsChunkPluginmodule.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标签，即：
}
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，避免报错。
缺点：这样打包有一个很明显的缺点，即是打包出的文件是压缩的，不方便对文件进行二次修改。（没有找到解决压缩的办法）
最终解决办法，还是通过让ip.js这个文件脱离项目的模块化，然后在index.html中多带带引用。（这是最开始就想到的解决办法，但并不是自己想要的解决方案，但无奈认知有限，没有解决掉之前的问题）。
解决流程：
首先在webpack引入CopyWebpackPlugin, 配置代码：
new CopyWebpackPlugin([
{from: "./src/config/ip.js", to: "ip.js"},
])
在index.html中多带带引入script标签，注意要配置一个随机后缀，即：
防止ip.js因为缓存导致问题。
以上，就解决了webpack多带带打包指定js的问题。
ps：希望有更好的方法来分享给我。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89595.html
摘要：样式变多后，命名将更加混乱。缺点是不能利用成熟的预处理器或后处理器，和伪类处理起来复杂。经过这样混淆处理后，名基本就是唯一的，大大降低了项目中样式覆盖的几率。就只能使用预处理器自己的语法来做样式复用了。一 前言CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也...
本文主要介绍了Selenium多窗口切换解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 在做web端自动化测试用例编写过程中，大家有没有遇到窗口切换的情况，比如如下截图所示的商品列表页，点击任何一款产品后切换到这块产品详情页的情况。 此时浏览器中叠放了两个窗口，如下截图这种情况； 或者出现打开两个浏览器窗口的...
摘要：主要通过样式为其赋予不同的表现标签用来定义内联行内元素，并无实际的意义。html文档结构 1 DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言，zh-CN中文的意思，整个文档的内容以中文为主，如果以英文为主，就写成lang=en 3 4 <head> 5 <meta charset...
摘要：问题分析随着回滚版本的放量，主端崩溃逐渐回归正常，进一步坐实了新版本存在问题。内容非常多但都是重复的，看起来进程没有启动，导致连接端一直在进行重连。背景公司的主打产品是一款跨平台的 App，我的部门负责为它提供底层的 sdk 用于数据传输，我负责的是 Adnroid 端的 sdk 开发。sdk 并不直接加载在 App 主进程，而是隔离在一个多带带进程中，然后两个进程通过 tcp 连接进行通信...
小编写这篇文章的一个主要目的，主要是给大家讲解关于Python的一些技能，主要是会涉及到相关的一些数据问题，那么，怎么样才能够实现序列化的一些操作呢？下面小编就给大家详细的去做一个解答。 在日常开发中，对数据进行序列化和反序列化是常见的数据操作，Python提供了两个模块方便开发者实现数据的序列化操作，即json模块和pickle模块。这两个模块主要区别如下： json是一个文本序列化格式...
阅读 3003·2021-11-11 16:55
阅读 3113·2021-10-18 13:34
阅读 564·2021-10-14 09:42
阅读 1606·2021-09-03 10:30
阅读 808·2021-08-05 10:02
阅读 927·2019-08-30 11:27
阅读 3454·2019-08-29 15:14
阅读 1207·2019-08-29 13:02
