webpack项目调试以及独立打包配置文件的方法


Posted in Javascript onFebruary 28, 2018

webpack项目调试

-sourcemap

webpack配置提供了devtool这个选项,如果设置为 ‘#source-map',则可以生成.map文件,在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

webpack独立生成可修改的配置文件
用generate-asset-webpack-plugin这个插件,在webpack.prod.config.js中去生成configServer.json文件,
让其build的时候生成json文件,然后时候get方法异步获取json,替换url即可
具体做法:
先安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
在webpack.prod.conf.js里面配置
//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
 return JSON.stringify(cfgJson);
}
//让打包的时候输入可配置的文件
  new GenerateAssetPlugin({
    filename: 'serverconfig.json',
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

打包之后,在根目录就会生成serverconfig.json文件

使用(vue-resourse):

Vue.http.get("serverconfig.json").then((result)=>{
    localStorage.setItem('ApiUrl',result.data.ApiUrl);
    console.log(localStorage.getItem('ApiUrl'));
 }).catch((error)=>{console.log(error)});

则可以获取到serverconfig.json里面的key ApiUrl的值,需要注意的是,由于是异步操作,为了通信,可以采用localstorage,把东西存起来,即localstorage.setItem;使用的时候可以用localstorage.getItem

以上这篇webpack项目调试以及独立打包配置文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 #Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 #Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 #Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 #Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 #Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 #Javascript
You might like
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
js日期联动示例
2014/05/02 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
简单实现python收发邮件功能
2018/01/05 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python实现事件驱动
2018/11/21 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python读取Excel表格文件的方法
2019/09/02 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python中如何引入第三方模块
2020/05/27 Python
基于python实现删除指定文件类型
2020/07/21 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Django admin组件的使用
2020/10/24 Python
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
小学音乐教学反思
2014/02/05 职场文书
电钳工人个人求职信
2014/05/10 职场文书
幼儿园见习报告
2014/10/30 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2015年新学期寄语
2015/02/26 职场文书
小学运动会入场词
2015/07/18 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
python的html标准库
2022/04/29 Python