web-dev-qa-db-fra.com

Minification du code ES6 dans le webpack en utilisant babel

J'ai essayé des options telles que Uglifyjs, babelli (babel-minify). Rien ne semble fonctionner. Uglify lance une erreur comme celle-ci:

Nom attendu [au680.bundle.js: 147541,22]

babelli ne minimise pas non plus le code. N'importe qui peut donner un exemple simple de minification es6 utilisant le webpack 2, babel. Peut être un plugin qui fait le travail proprement.

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"
    }
  }
}
webpackbabeljsproduction-environmentbundling-and-minification
8
simbathesailor

De https://github.com/webpack/webpack/issues/2545 :

Le problème est qu'UglifyJS ne prend pas encore en charge ES6, il n'est donc pas encore possible d'éviter cette transformation. Vous pouvez suivre la progression sur mishoo/UglifyJS2 # 448 .

Il existe de nombreuses solutions; en voici deux:

Transpilez d'abord votre code ES6, puis réduisez-le
Pour une compatibilité maximale, transpilez avec Babel puis réduisez avec Babel Minify (anciennement Babili):

  1. Installez babel-loader et babel-minify-webpack-plugin

    npm install babel-loader babel-minify-webpack-plugin --save-dev

    Ou:

    yarn add babel-loader babel-minify-webpack-plugin --dev

  2. Ajoutez ceci à webpack.config.js:

    const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin()
  ]
};

    Ou si vous préférez, vous pouvez utiliser UglifyJS au lieu de Babel Minify:

    const MinifyPlugin = require('uglifyjs-webpack-plugin');

Réduisez votre code ES6 sans transpiler
Pour la compatibilité uniquement avec les navigateurs prenant en charge les fonctionnalités ES6 que vous utilisez, réduisez en utilisant Babel Minify sans transpiler:

  1. Installer babel-minify-webpack-plugin

    npm install babel-minify-webpack-plugin --save-dev

    Ou:

    yarn add babel-minify-webpack-plugin --dev

  2. Ajoutez ceci à webpack.config.js:

    const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new MinifyPlugin()
  ]
};

Les paramètres par défaut de Babel Minify ont bien fonctionné pour moi, mais vous pouvez voir ici pour plus d'options que vous pouvez personnaliser: https://github.com/webpack-contrib/babel-minify-webpack-plugin

11
bmaupin