CODEWITHSUNDEEP
javascriptwebpack
jaroApp
jaroApp

Reputation: 899

webpack 2 uglify plugin ES6

I use webpack to bundle modules react written in ES6. All have been worked until I added json-immutable plugin. There required is json-stream-stringify and there is a class:

class JSONStreamify extends CoStream {...}
module.exports = function(obj, replacer) {
    return new JSONStreamify(obj, replacer);
};

webpack works good but not monify files because Uglify throw error

Unexpected token: name (JSONStreamify)

I found here information about module https://github.com/webpack-contrib/uglifyjs-webpack-plugin . I installed and added ecma support but still I have the same errors. I've trie remove I've tried add exclude node_modules but without results.

My webpack.config.js is 

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            "only": "src/**",
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy","minify-simplify"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin({
      ecma: 6
    })
  ]
}

Any hints how I can solve this problem? Maybe any external tool to minify files after webpack?

Upvotes: 3

Views: 3843

Answers (1)

jaroApp
jaroApp

Reputation: 899

Solution:

one way what I found is transpile all with node_modules by babel to ES5 and it works.

my webpack.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

Maybe will useful for someone.

Upvotes: 1

Related Questions