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项目调试以及独立打包配置文件的更多相关文章

  1. Vue+webpack项目的多环境打包配置

    背景:由于需要将应用部署到线上开发环境.线上测试环境.线上预发环境.线上生产环境,而每个环境的访问地址是不同的.如果每次更改请求地址未免有些繁琐,就考虑在本地进行一次性配置. 代码管理工具:git 代 ...

  2. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  3. vue-multi-module【多模块集成的vue项目,多项目共用一份配置,可以互相依赖,也可以独立打包部署】

    基于 vue-cli 2 实现,vue 多模块.vue多项目集成工程 Github项目地址 : https://github.com/BothEyes1993/vue-multi-module 目标: ...

  4. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  5. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  6. webpack项目如何正确打包引入的自定义字体?

    一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字体呢? 其实实现起来并不复杂,可以借用CSS3 ...

  7. webpack项目如何正确打包引入的自定义字体

    webpack项目如何正确打包引入的自定义字体 一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字 ...

  8. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  9. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

随机推荐

  1. springboot启动报异常,Failed to load property source from location 'classpath:/application.yml'

    学习springboot,在启动时抛出下图异常 往下看异常信息,找到异常的具体位置 找到application.yml文件的对应位置,发现params配置前面多了空格 去掉空格重新启动,可以了 写代码 ...

  2. Intel Edision —— 开发环境选择一贴通

    前言 原创文章,转载引用务必注明链接.如有疏漏,欢迎斧正. 使用Intel开发板设置工具配置好之后,会自动跳转到集成开发环境(integrated development environment,ID ...

  3. overflow(超出部分省略号)

    溢出:overflow:visible/hidden/scroll/auto/inherit: visible:默认值.不剪切.hidden:超出部分剪切.没有滚动条.scroll:超出部分有滚动条. ...

  4. 【Mongodb教程 第十九课 】PHP与MONGODB的条件查询

    与普通的关系型数据库类似,在对数据的删.改.查的时候,会用到查询条件,如mysql中的 where… 而MongoDB中,经过php来做的所有的操作指令都是用array来包裹的: MongoColle ...

  5. Ubuntu 16.04 同时使用python3.5

    Python 3.x版本使用pip3,它会把你想下载的包放到usr/local/lib/python3.5/dist-packages/下,而非usr/local/lib/python2.7/dist ...

  6. 标准C头文件

    ISO C标准定义的头文件: POSIX标准定义的必须的头文件: POSIX标准定义的XSI可选头文件: POSIX标准定义的可选头文件:

  7. nginx-伤心的事

    今天测试接口,总是出问题,测试了两天,整个流程就卡在最后一步. 每次采用curl,request等请求访问我的服务器都会返回403状态码,网上找了很多资料 有权限的,有静态文件的,然而很多都没有什么卵 ...

  8. Linux安装程序Anaconda分析(续)

    本来想写篇关于Anaconda的文章,但看到这里写的这么详细,转,原文在这里:Linux安装程序Anaconda分析(续) (1) disptach.py: 下面我们看一下Dispatcher类的主要 ...

  9. CXF发布在Web服务

    1.下载apache-cxf-3.1.4,将jar引入新工程中. 2.People.java package com.soap.server; import java.util.Date; impor ...

  10. dubbo配置指南

    dubbo配置指南 SLA配置在此完成!Service Layer Agreement ApplicationConfig 应用配置,用于配置当前应用信息,不管该应用是提供者还是消费者. Regist ...