您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
webpack項(xiàng)目調(diào)試
-sourcemap
webpack配置提供了devtool這個(gè)選項(xiàng),如果設(shè)置為 ‘#source-map',則可以生成.map文件,在chrome瀏覽器中調(diào)試的時(shí)候可以顯示源代碼。
devtool: '#source-map' webpack獨(dú)立生成可修改的配置文件 用generate-asset-webpack-plugin這個(gè)插件,在webpack.prod.config.js中去生成configServer.json文件, 讓其build的時(shí)候生成json文件,然后時(shí)候get方法異步獲取json,替換url即可 具體做法: 先安裝generate-asset-webpack-plugin插件 npm install --save-dev generate-asset-webpack-plugin 在webpack.prod.conf.js里面配置
//讓打包的時(shí)候輸出可配置的文件 var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); var createServerConfig = function(compilation){ let cfgJson={ApiUrl:"http://139.129.31.108:8001"}; return JSON.stringify(cfgJson); }
//讓打包的時(shí)候輸入可配置的文件 new GenerateAssetPlugin({ filename: 'serverconfig.json', fn: (compilation, cb) => { cb(null, createServerConfig(compilation)); }, extraFiles: [] })
打包之后,在根目錄就會(huì)生成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;使用的時(shí)候可以用localstorage.getItem
感謝各位的閱讀!關(guān)于“webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。