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 相关文章推荐
Jquery中对数组的操作代码
Aug 12 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
详解如何运行vue项目
Apr 15 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript类型转换示例
2014/04/29 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
python利用正则表达式提取字符串
2016/12/08 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python发展史及网络爬虫
2019/06/19 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
Python面试题集
2012/03/08 面试题
大学秋游活动方案
2014/02/11 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
高中社区服务活动报告
2015/02/05 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python