So implementieren Sie Debugging und unabhängige Verpackungskonfigurationsdateien über Webpack-Projekte (ausführliches Tutorial)

Im Folgenden werde ich Ihnen eine Methode zum unabhängigen Debuggen von Webpack-Projekten und Packen von Konfigurationsdateien vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Webpack-Projekt-Debugging

-sourcemap

Die Webpack-Konfiguration bietet die Devtool-Option, wenn Mit der Einstellung „#source-map“ können Sie eine .map-Datei generieren und den Quellcode beim Debuggen im Chrome-Browser anzeigen.

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: []
  })

Nach dem Verpacken, in der root Das Verzeichnis generiert die Datei serverconfig.json

Verwendung (vue-resource):

Vue.http.get("serverconfig.json").then((result)=>{
    localStorage.setItem('ApiUrl',result.data.ApiUrl);
    console.log(localStorage.getItem('ApiUrl'));
 }).catch((error)=>{console.log(error)});

kann sein Für den Wert des Schlüssels ApiUrl in serverconfig.json ist zu beachten, dass Sie für die Kommunikation localstorage zum Speichern von Dingen verwenden können, d. h. localstorage.setItem, wenn Sie es verwenden .getItem

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung von On-Change-Attributen in IView

Verwendung von Axios Element zur Implementierung Globale Anfragen Lademethode

Wählen Sie die Selektor-Mehrfachauswahl-Überprüfungsmethode in iview aus

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Debugging und unabhängige Verpackungskonfigurationsdateien über Webpack-Projekte (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!