webpack項目調(diào)試以及獨立打包配置文件的方法
更新時間：2018年02月28日 15:36:19 作者：xiaofenguo
下面小編就為大家分享一篇webpack項目調(diào)試以及獨立打包配置文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
webpack項目調(diào)試
-sourcemap
webpack配置提供了devtool這個選項，如果設(shè)置為 ‘#source-map'，則可以生成.map文件，在chrome瀏覽器中調(diào)試的時候可以顯示源代碼。
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項目調(diào)試以及獨立打包配置文件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue圖片加載與顯示默認(rèn)圖片的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue頁面跳轉(zhuǎn)傳遞參數(shù)及接收方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue之computed的緩存特性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了Vue2.0表單校驗組件vee-validate的使用詳解，詳細(xì)的介紹了vee-validate使用教程。具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了在vue中實現(xiàn)禁止回退上一步,路由不存歷史記錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue @click.stop阻止事件向祖先元素傳遞方式(事件冒泡)
在Vue中,使用@click.stop修飾符可以阻止事件向父級元素傳遞,從而實現(xiàn)單擊父級元素執(zhí)行函數(shù),而單擊子元素不執(zhí)行函數(shù)的需求2025-02-02
基于ant-design-vue實現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個功能的實現(xiàn)代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進(jìn)行實例代碼講解，需要的朋友可以參考下2022-11-11