webpack 单独打包指定JS文件的方法


Posted in Javascript onFebruary 22, 2018

背景

最近接到一个需求,因为不确定打出的前端包所访问的后端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="/" rel="external nofollow" >
</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的问题。

ps:希望有更好的方法来分享给我。

这篇webpack 单独打包指定JS文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
Javascript Objects详解
Sep 04 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
js实现抽奖效果
Mar 27 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
使用jquery实现轮播图效果
Jan 02 jQuery
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
webpack中使用iconfont字体图标的方法
Feb 22 #Javascript
微信小程序之圆形进度条实现思路
Feb 22 #Javascript
webpack下实现动态引入文件方法
Feb 22 #Javascript
JavaScript 有用的代码片段和 trick
Feb 22 #Javascript
3种vue路由传参的基本模式
Feb 22 #Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 #Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
You might like
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
JS中的数组的sort方法使用示例
2014/01/22 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python操作redis方法总结
2018/06/06 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
基于Python函数和变量名解析
2019/07/19 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
自动一体化专业求职信
2014/03/15 职场文书
2015年宣传工作总结
2015/04/08 职场文书
教师思想工作总结2015
2015/05/13 职场文书
MySQL锁机制
2021/04/05 MySQL
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫