Vue.js/webpack：ホットリロード時に古いバンドルmain - *。jsファイルを削除するにはどうすればいいですか？

Question

私はVue.jsを使用してDjangoでSPAアプリケーションを作成しています。私は、webpackを使用してコードを作成します（具体的にはwebpack-simplevue-cliセットアップから）。

私は、コード「見て」とホットリロードに次を使用します。問題は、私は、コードを変更すると、それが新しいバンドル.jsファイルやアップデートを生成建てれるたびです

$ ./node_modules/.bin/webpack --config webpack.config.js --watch 

をwebpack-stats.jsonその1つを指すが、古いものは削除しない。古い（役に立たない）ファイルを削除するにはどうしたらいいですか？

webpack.config.js：

var path = require("path") 
var webpack = require('webpack') 
var BundleTracker = require('webpack-bundle-tracker') 


function resolve (dir) { 
    return path.join(__dirname, dir) 
} 

module.exports = { 
    context: __dirname, 

    // entry point of our app. 
    // assets/js/index.js should require other js modules and dependencies it needs 
    entry: './src/main', 

    output: { 
      path: path.resolve('./static/bundles/'), 
      filename: "[name]-[hash].js", 
    }, 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: false 
      }, 
      sourceMap: true 
     }), 
    ], 

    module: { 
     loaders: [ 
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS 
      {test: /\.vue$/, loader: 'vue-loader'} 

     ], 
    }, 

    resolve: { 
     extensions: ['.js', '.vue', '.json'], 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js', 
      '@': resolve('src') 
     } 
    }, 
} 

webpack-stats.json：

{ 
    "status":"done", 
    "chunks":{ 
     "main":[ 
     { 
      "name":"main-faa72a69b29c1decd182.js", 
      "path":"/Users/me/Code/projectname/static/bundles/main-faa72a69b29c1decd182.js" 
     } 
     ] 
    } 
} 

またgitの/ソースコントロールにこれを追加するための良い方法は何ですか？それ以外の場合は毎回変更されますので、次のように追加する必要があります。

$ git add static/bundles/main-XXXXX.js -f 

迷惑になる。

任意のポインタ？ありがとう！

Answer 1

実際に本番用にビルドするときだけ、新しいバンドルが作成されるようにwebpackを調整する必要があります。

のWebPACK-シンプルVUE-cliのテンプレートから、あなたはそれが生産ENV、ないのdevのENVに設定されている場合uglifyingとだけ縮小化することは行われていることがわかります：

if (process.env.NODE_ENV === 'production') { 
    module.exports.devtool = '#source-map' 
    // http://vue-loader.vuejs.org/en/workflow/production.html 
    module.exports.plugins = (module.exports.plugins || []).concat([ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: '"production"' 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false 
     } 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
    }) 
    ]) 
}