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知识点收藏
Feb 22 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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 事件机制(2)
2011/03/23 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
PHP asXML()函数讲解
2019/02/03 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
js中this对象用法分析
2018/01/05 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
JS实现轮播图效果
2020/01/11 Javascript
js实现动态时钟
2020/03/12 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python多继承原理与用法示例
2018/08/23 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
银行求职推荐信范文
2013/11/30 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
男方父母证婚词
2014/01/12 职场文书
甲午大海战观后感
2015/06/02 职场文书