使用babel缩小webpack中的ES6代码

我尝试过诸如Uglifyjs,babelli(babel-minify)之类的选项.似乎没有什么工作.Uglify会抛出这样的错误：

名称预期[au680.bundle.js：147541,22]

babelli也没有缩小代码.任何人都可以使用webpack 2,babel进行es6缩小的简单例子.
可能是一个干净利落地完成工作的插件.

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'),'./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,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','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"
    }
  }
}

解决方法

从 https://github.com/webpack/webpack/issues/2545开始：

The problem is that UglifyJS doesn’t support ES6 yet so it’s not possible to avoid that transformation yet. You can follow the progress at 07001 .

有很多解决方案;这是一对夫妇：

首先透明ES6代码,然后缩小它
为了获得最大的兼容性,使用Babel进行转换,然后使用Babel Minify(以前的Babili)缩小：

>安装babel-loader和babel-minify-webpack-plugin

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

要么：

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

>将此添加到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()
  ]
};

或者如果您愿意,可以使用UglifyJS代替Babel Minify：

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

无需转换即可缩小您的ES6代码
为了仅与支持您正在使用的ES6功能的浏览器兼容,请使用Babel Minify进行缩小而不进行转换：

>安装babel-minify-webpack-plugin

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

要么：

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

>将此添加到webpack.config.js：

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

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

Babel Minify的默认设置对我来说很好,但您可以在这里看到更多可以自定义的选项：https://github.com/webpack-contrib/babel-minify-webpack-plugin

使用babel缩小webpack中的ES6代码

解决方法

相关推荐