Vue+Type Script+環境設定(1)

本番環境の構成
まず、本番環境の導入を参照して、webpack.config.dev.jsをwebpack.config.dev.jsと名付けてコピーします.
生産環境を指定するには、DefinePluginを使用します.
Vueなどのライブラリは、コードレベルでもいくつかの本番環境のフラグに依存しています.DefinePluginによって処理することができる.DefinePlugin Vueは主にNodeのprocess.env.NODE_ENVに依存しているので、pluginsブロックに構成を追加することができます.

    plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("production")
          }),
    ]

注意すべきは、DefinePluginは実際に直接置換を使用しているからです.私たちは次のような過程をしています.

//    
if (process.env.NODE_ENV === "production") {
  console.log('Debug info')
}
//    
if("production" === "production"){
}

したがって、NODE_ENV自体に文字列が含まれる必要があります.したがって、上記のJSON.stringify("production")を'"production"'に変更することもできる.
コードの使用のために他のグローバル構成変数を指定することもできます.
UglifyJsPluginを使用してJSコードを圧縮
公式ドキュメント:UglifyJsPlugin

取付UglifyJsPlugin,$npm i -D uglifyjs-webpack-plugin

導入モジュールconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');

pluginsリストに登録:

plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("production")
          }),
        new UglifyJsPlugin({}),
    ]

詳細については、上記の公式ドキュメントを参照してください.
Vuライブラリをパッケージ化しない
依存するライブラリをbundleにパッケージします.jsは,対応ライブラリが提供するCDNの利用に不便である.そこでここでは、Vueライブラリをbundle.jsにパッケージ化しない方法を紹介します.

は、externalsの構成ブロックに直接宣言を追加することができる.

    externals:{
        vue: "Vue"
    },

は、その後、index.htmlに直接対応するリソースを追加する参照は、以下の通りである:

.

```html