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
vue圖片加載與顯示默認圖片實例代碼
這篇文章主要為大家詳細介紹了vue圖片加載與顯示默認圖片的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue頁面跳轉(zhuǎn)傳遞參數(shù)及接收方式
這篇文章主要介紹了Vue頁面跳轉(zhuǎn)傳遞參數(shù)及接收方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue之computed的緩存特性
這篇文章主要介紹了vue之computed的緩存特性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue2.0表單校驗組件vee-validate的使用詳解
本篇文章主要介紹了Vue2.0表單校驗組件vee-validate的使用詳解，詳細的介紹了vee-validate使用教程。具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
在vue中實現(xiàn)禁止回退上一步,路由不存歷史記錄
這篇文章主要介紹了在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)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
從0搭建vue3組件庫Input組件
這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個功能的實現(xiàn)代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行實例代碼講解，需要的朋友可以參考下
2022-11-11