Minification for ES6 code in webpack using babel

后端 未结 2 658
难免孤独
难免孤独 2021-02-06 03:18

I have tried options such as Uglifyjs,babelli (babel-minify ).nothing seems to be working.Uglify throws some error like this:

Name expected [au680.bundle.js:147541,22]

相关标签:
2条回答
  • 2021-02-06 03:49

    Update

    If you aren't worried about supporting older browsers, webpack v4+ will minify your code by default in production mode:

    webpack --mode=production
    

    Previous answer

    From 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 mishoo/UglifyJS2#448 .

    There are many solutions; here are a couple:

    Transpile your ES6 code first, then minify it
    For maximum compatibility, transpile using Babel and then minify with Babel Minify (formerly Babili):

    1. Install babel-loader and babel-minify-webpack-plugin

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

      Or:

      yarn add babel-loader babel-minify-webpack-plugin --dev
      
    2. Add this to 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()
        ]
      };
      

      Or if you prefer you can use UglifyJS instead of Babel Minify:

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

    Minify your ES6 code without transpiling
    For compatibility only with browsers that support the ES6 features you're using, minify using Babel Minify without transpiling:

    1. Install babel-minify-webpack-plugin

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

      Or:

      yarn add babel-minify-webpack-plugin --dev
      
    2. Add this to webpack.config.js:

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

    The default settings for Babel Minify worked fine for me but you can see here for more options you can customize: https://github.com/webpack-contrib/babel-minify-webpack-plugin

    0 讨论(0)
  • 2021-02-06 03:57

    Following is my webpack configurations file. I am using webpack 2.3.1 with dynamic routing of react-router. Hope it helps you.

    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',
            }]
          }
        ]
      },
    };
    
    0 讨论(0)
提交回复
热议问题