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 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP仿盗链代码
2012/06/03 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP实现八皇后算法
2019/05/06 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python opencv实现图像配准与比较
2021/02/09 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
求职自荐信范文格式
2013/11/29 职场文书
饭店工作计划书
2014/01/10 职场文书
意向协议书范本
2014/04/23 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
我的长征观后感
2015/06/09 职场文书
看雷锋电影观后感
2015/06/10 职场文书