Webpack プロジェクトを通じてデバッグおよび独立したパッケージ化構成ファイルを実装する方法 (詳細なチュートリアル)

以下では、Webpack プロジェクトをデバッグし、構成ファイルを個別にパッケージ化する方法を共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。

webpack プロジェクトのデバッグ

-sourcemap

webpack 設定では、devtool オプションを提供します。「#source-map」に設定すると、Chrome ブラウザーでのデバッグ時に .map ファイルを生成できます。表示される。

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-resource)を使用します:えー

は OK です。serverconfig.json のキー ApiUrl の値を取得します。これは非同期操作なので、通信の場合は、localstorage.setItem を使用して保存できます。 localstorage.getItem を使用してください

上記をすべての人のためにまとめました。将来的にはすべての人に役立つことを願っています。

関連記事:

IViewでのon-change属性の使用に基づく詳細な説明

Axios Elementを使用してグローバルリクエストロードを実装する

iviewでのセレクターの複数選択検証方法

以上がWebpack プロジェクトを通じてデバッグおよび独立したパッケージ化構成ファイルを実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。