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

亚连
リリース: 2018-06-02 15:16:44
オリジナル
2558 人が閲覧しました

以下では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート