Vue.js/webpack: Wie lösche ich alte Bundle-Hauptdateien - * .js, wenn sie beim Warmladen neu geladen werden?

Question

Ich benutze Vue.js, um eine SPA-Anwendung mit Django und ich transpile, häkeln und bündeln den Code mit Webpack (speziell webpack-simple von vue-cli Setup).

ich folgendes „watch“ und Hot-Reload-Code ab:

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

Das Problem jedes Mal, wenn ich den Code ändern und es wird gebaut es ein neues Bündel Js erzeugt Datei und Updates webpack-stats.json um darauf zu zeigen, aber löscht nicht die alten. Wie lösche ich die alten (nutzlosen) Dateien?

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" 
     } 
     ] 
    } 
} 

Auch das, was ist ein guter Weg, dies fügen Kontrolle git/Quelle? Sonst ändert es sich jedes Mal und ich muss es so hinzufügen:

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

was nervig wird.

Irgendwelche Zeiger? Vielen Dank!

Answer 1

Sie sollten Webpack so einstellen, dass ein neues Bundle nur erstellt wird, wenn es tatsächlich für die Produktion erstellt wird.

Vom webpack-simple vue-cli Vorlage, werden Sie, dass uglifying und minifying sehen nur dann erfolgen, wenn es um eine Produktion env gesetzt ist, keine dev env:

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 
    }) 
    ]) 
}