Comment implémenter des fichiers de configuration de débogage et d'empaquetage indépendants via des projets Webpack (tutoriel détaillé)

Ci-dessous, je vais partager avec vous une méthode pour déboguer les projets Webpack et empaqueter les fichiers de configuration de manière indépendante. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Débogage du projet Webpack

-sourcemap

La configuration du webpack fournit l'option devtool, si Défini sur « #source-map », vous pouvez générer un fichier .map et afficher le code source lors du débogage dans le navigateur 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: []
  })

Après packaging, le fichier serverconfig.json sera généré dans le répertoire racine

Utilisation (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)});

Ensuite, vous pouvez obtenir la valeur de la clé ApiUrl dans serverconfig.json. Il convient de noter que puisqu'il s'agit d'une opération asynchrone, pour la communication, vous pouvez utiliser localstorage pour stocker des éléments, c'est-à-dire localstorage.setItem ; vous pouvez l'utiliser lorsque vous utilisez localstorage.getItem

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée de l'utilisation des attributs en cas de changement dans IView

Utilisation de l'élément Axios pour implémenter Requêtes globales Méthode de chargement

Sélectionner la méthode de vérification multi-sélection du sélecteur dans iview

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!