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 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python实现高效求解素数代码实例
2015/06/30 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
jupyter 导入csv文件方式
2020/04/21 Python
python怎么删除缓存文件
2020/07/19 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
检讨书模板大全
2015/05/07 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书