Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-02 15:16:44
original
2536 Les gens l'ont consulté

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里面配置
Copier après la connexion

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
 return JSON.stringify(cfgJson);
}
Copier après la connexion

//让打包的时候输入可配置的文件
  new GenerateAssetPlugin({
    filename: 'serverconfig.json',
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })
Copier après la connexion

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)});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!