縮小使用巴貝爾

Question

中的WebPack ES6碼我曾嘗試選項，如Uglifyjs，babelli（巴貝爾-縮小）.nothing似乎working.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'), 
 
\t 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'), 
 
\t 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" 
 
    } 
 
    } 
 
}

Answer 1

以下是我的WebPack配置文件。我正在使用webpack 2.3.1和react-router的動態路由。希望它可以幫助你。

var path = require('path'); 
var webpack = require('webpack'); 
var package=require('./package.json'); 
var config = require('./config'); 
var ManifestPlugin = require('webpack-manifest-plugin'); 


const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var getPlugins = function(){ 
    var pluginsList = [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: Infinity, 
     filename: 'vendor.bundle_[hash].js' 
    }), 

    new webpack.DefinePlugin({ 
     "process.env": { 
     NODE_ENV: JSON.stringify("production") 
     } 
    }), 
    new webpack.NamedModulesPlugin(), 
    new ManifestPlugin({ 
     fileName: 'build-manifest.json' 
    }) 
    ]; 
    pluginsList.push(new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: false 
    })); 
    pluginsList.push(new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     }, 
     output: { 
     comments: false 
     }, 
     sourceMap: false, 
     minimize: true 
    })); 
    return pluginsList; 
} 



module.exports = { 
    cache: true, 
    output: { 
    path:path.join(__dirname, "dist/js"), 
    filename: "[name]_[hash].js", 
    chunkFilename:"[name]_[hash].js", 
    publicPath:config.envConfig.JS_ASSETS_PATH 
    }, 
    devServer: { 
    contentBase: path.join(__dirname, "dist"), 
    compress: true, 
    port: 8080 
    }, 

    entry: { 
    index: [ 
     package.paths.app 
    ], 
    vendor: [ 
     'react', 'react-dom','phrontend', 
     'react-ga' 
    ] 
    }, 
    plugins: getPlugins(), 
    target: 'web', 

    module: { 
    rules: [ 
     { 
     test: /.jsx?$/, 
     exclude: /node_modules/, 
     use: [{ 
      loader: 'babel-loader', 
     }] 
     } 
    ] 
    }, 
}; 

Answer 2

從https://github.com/webpack/webpack/issues/2545：

的問題是，UglifyJS不支持ES6又那麼它不可能避免這種轉變呢。您可以按照mishoo/UglifyJS2#448的進度進行操作。

有很多解決方案;這裏有幾個：

Transpile您ES6代碼，然後再運行如下它
最大的兼容性，transpile用巴貝爾，然後用巴貝爾縮減大小（前身巴比利）運行如下：

1. 安裝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 
   

2. 一下添加到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代替通天縮減大小：

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

縮減大小的ES6代碼無需轉發
僅與支持所用ES6功能的瀏覽器兼容，請儘量減少使用摹巴貝爾縮減大小不transpiling：

1. 安裝babel-minify-webpack-plugin

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

   或者：

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

2. 添加這webpack.config。JS：

   const MinifyPlugin = require('babel-minify-webpack-plugin'); 
   
   module.exports = { 
       // ... 
       plugins: [ 
       new MinifyPlugin() 
       ] 
   }; 
   

對巴貝爾再縮小默認設置的工作對我很好，但你可以在這裏看到更多的選項，你可以自定義：https://github.com/webpack-contrib/babel-minify-webpack-plugin