2017-09-05 2 views
1

Hier verwenden ist mein webpack config:Wie Javascript uglify webpack

var path = require('path'); 
var webpack = require('webpack'); 
var CompressionPlugin = require("compression-webpack-plugin"); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 

module.exports = { 
    entry: './index.js', 
    output: { 
     path: __dirname, 
     filename: 'public_html/assets/js/bundle.js' 
    }, 
    resolveLoader: { 
     modules: ["node_modules"] 
    }, 

    module: { 

     rules: [ 
      { 
       enforce: 'pre', 
       test: /\.tag$/, 
       exclude: /node_modules/, 
       loader: 'riotjs-loader', 
      }, 

      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       options: { 
        presets: [ 
        'es2015', 
        ], 
        "babelrc": false 
       } 
      }, 

      { 
       test: /\.css$/, 
       use: [ 
        { 
         loader: "css-loader", 
         options: { 
          modules: false 
         } 
        } 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.LoaderOptionsPlugin({debug: true}), 
     new UglifyJSPlugin(), 
     new webpack.ProvidePlugin({ 
      riot: 'riot' 
     }), 
     new CompressionPlugin({ 
       asset: "[path].gz[query]", 
       algorithm: "gzip", 
       test: /\.(js|html)$/, 
       threshold: 10240, 
       minRatio: 0.8 
     }) 
    ] 
} 

Das komplett uglifies die Bundle js aber das Problem ist, globale Variablen Referenzen verloren. Ich meine die Eigenschaften des globalen Objekts DataMixin sind verloren.

Zum Beispiel innerhalb index.html ich habe:

<script> 
    window.onload = function() { 
     DataMixin.get_data_page_load(); //DataMixin defined in other js file 
    }; 
</script> 

Nach uglifying, ich Fehler:

Cannot read property 'get_data_page_load' of undefined

Wie kann ich dieses Problem beheben? Ich verwende Webpack 2.

+0

Afik, webpack kapselt alle JS-Code so, wenn Sie zugewiesen 'DataMixin' zu' window' es nicht verfügbar sein wird. – evolutionxbox

+0

@evolutionxbox Ich habe versucht, es Fenster zu zuweisen, aber die Eigenschaften sind immer noch undefined – Satyadev

+0

Können Sie die Frage aktualisieren, um eine [mcve] von 'DataMixin' einzuschließen? – evolutionxbox

Antwort

0

Für Webpack 2 müssen Sie das externe Uglify-Plugin nicht installieren.
In Ihrem webpack Config diesen new UglifyJSPlugin(), mit folgenden ersetzen:

new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     minimize: true, 
     compressor: { 
     warnings: false, 
     }, 
    }), 
+0

Wird dadurch das Problem gelöst, dass das DataMixin "undefiniert" ist? – evolutionxbox

+0

Ich glaube schon. Versuche es. –

+0

Woher kommt 'DataMixin'? –