Verkleinerung für die ES6-code in webpack mit babel

Habe ich versucht Optionen wie Uglifyjs,babelli (babel-minifizieren ).nichts scheint zu funktionieren.Verunstalten wirft eine Fehlermeldung wie diese:

Namen erwartet [au680.bundle.js:147541,22]

babelli nicht minimiert den code entweder.Kann jeder ein einfaches Beispiel geben von es6 Verkleinerung nutzen webpack 2, babel.
Kann ein plugin, dass die Arbeit nicht sauber.

JS:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');

var appConfig= require('./config.js');
console.log("appConfig is ->>>",appConfig);
var appPort = appConfig.APP_PORT;//Port on which the application is running

process.noDeprecation = true;
var ASSET_PATH = '/'
module.exports = function(options) {
  var entry, jsLoaders, plugins, cssLoaders, devtool;
  console.log('options webconfig-->', options, 'directory name', __dirname);

  //If production is true
  if (options.prod) {
    console.log('production minification');
    //Entry
    entry = {
       veris:path.resolve(__dirname,'./VerisInstrument/js/VerisApp.js'),
       au680 : path.resolve(__dirname,'./Au680Instrument/js/au680App.js'),
	   commondashboard:path.resolve(__dirname,'./CommonDashboard/js/CommonDashboardApp.js'),
       groups:path.resolve(__dirname,'./Groups/js/GroupsApp.js'),
       homepage : path.resolve(__dirname,'./HomePage/js/HomePageApp.js'),
       infohealthcheck : path.resolve(__dirname,'./Common/js/infohealthcheckapp.js')
      
    };

   
    //Plugins
    plugins = [//Plugins for Webpack
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
   }),
  //  new webpack.optimize.UglifyJsPlugin({minimize: true,comments : false,compress: {
  //  //remove warnings
  //  warnings: false,

  //  //Drop console statements
  //  drop_console: true
  //}})

    
      //new es3MemberExpressionLiterals(),
      //
      
    ];

  //If app is in development
  } else {
    devtool = 'source-map';
    //Entry
    //entry = [
    //  "webpack-dev-server/client?http://0.0.0.0:" + appPort, //Needed for hot reloading
    //  "webpack/hot/only-dev-server", //See above
    //  //path.resolve(__dirname,'./app') //Start with js/app.js...
    //  path.resolve(__dirname,'./VerisInstrument/js/VerisApp')
    //];
  //  require("babel-core").transform("code", {
  //  plugins: ["transform-object-rest-spread"]
  //});
    entry = {
      main: [
        "webpack-dev-server/client?http://0.0.0.0:" + appPort, //Needed for hot reloading
        "webpack/hot/only-dev-server" //See above
      ],
      //path.resolve(__dirname,'./js/app') //Start with js/app.js...
     veris : path.resolve(__dirname,'./VerisInstrument/js/VerisApp'),
      au680 : path.resolve(__dirname,'./Au680Instrument/js/au680App.js'),
	  commondashboard:path.resolve(__dirname,'./CommonDashboard/js/CommonDashboardApp.js'),
      groups:path.resolve(__dirname,'./Groups/js/GroupsApp.js'),
      homepage : path.resolve(__dirname,'./HomePage/js/HomePageApp.js'),
      infohealthcheck : path.resolve(__dirname,'./Common/js/infohealthcheckapp.js')
      
    };
    
    //Only plugin is the hot module replacement plugin
    plugins = [
     new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('development'),
      }
     }),
     new webpack.HotModuleReplacementPlugin()//Make hot loading work,
    ]
  }

  return {
    devtool: devtool,
    entry: entry,
    //output: { //Compile into js/build.js
    //  path: path.resolve(__dirname, 'build'),
    //  filename: "js/bundle.js",
    //  publicPath : '/'
    //},
    output: { //Compile into js/build.js
      path: path.resolve(__dirname, 'build'),
      filename: '[name].bundle.js',
      publicPath : ASSET_PATH
    },
    module: {
      rules: [
      {
          test: /\.js$/, //Transform all .js files required somewhere within an entry point...
          loader: 'babel-loader', //...with the specified loaders...
          exclude: /node_modules/,
          options: {
          presets: ['es2015','react','stage-2','env'],
          plugins: [require('babel-plugin-transform-object-rest-spread'),require('babel-plugin-transform-es2015-destructuring'),require('babel-plugin-transform-es2015-parameters')]
        }
          //query : {
          //  presets : ['es2015','react','stage-2','env']
          //}

        }
        , {
          test:   /\.css$/, //Transform all .css files required somewhere within an entry point...
          use : [
            {
              loader : 'style-loader'
            },
            {
              loader : 'css-loader'
            },
            {
              loader : 'postcss-loader'
            },
            {
              loader: 'sass-loader'
            }
          ] //...with PostCSS
        }, {
          test: /\.jpe?g$|\.gif$|\.png$/i,
          loader: "url-loader?limit=100000"
        },
        { test: /\.(woff|woff2|eot|ttf|svg)$/,
         loader: 'url-loader?limit=100000' }
      ]
    },
    plugins: plugins,
    target: "web", //Make web variables accessible to webpack, e.g. window
    stats: false, //Don't show stats in the console
    node: {
      fs: "empty"
    }
  }
}

  • Haben Sie versucht, die UglifyJsPlugin? Haben Sie Sie sicher, dass Ihr code hat keine Fehler?
  • Folgende Fehlermeldung kommt wenn man versucht, UglifyJsPlugin FEHLER in au680.bundle.js von UglifyJs Namen erwartet [au680.bundle.js:147540,22] webpack: Fehler beim kompilieren.
  • Anwendung läuft aber ich sehe keine Verkleinerung geschieht, und sehen auch Fehler in der CLI
Schreibe einen Kommentar