Uglify the react bundle js using webpackLoop inside React JSXWhat do these three dots in React do?Programmatically navigate using react routerUsing Webpack for hot-loader and generating a physical file w/ ReactJs ES6webpack scss to css creating blank css file (vs 20017 .net core react)webpack 4 - app not loading at root in production modeReact with NodeJS and Webpack - bundled js big file sizeWebpack 4 not loading images from HTML filesWebpack v4 with multiple entries on a single page, chunks are duplicated unnecessarilyUsing webpack-dev-server 3 with parallel-webpack

Why is a statement like 1 + n *= 3 allowed in Ruby?

How to prevent a hosting company from accessing a VM's encryption keys?

What stops you from using fixed income in developing countries?

Thought experiment and possible contradiction between electromagnetism and special relativity

Contours of a national emergency in the United States

Is a memoized pure function itself considered pure?

How can I draw lines between cells from two different tabulars to indicate correlation?

Dealing with stress in coding interviews

What is the best way to solve this 6x6 sudoku?

Expanding powers of expressions of the form ax+b

50-move rule: only the last 50 or any consecutive 50?

Is first Ubuntu user root?

Why error propagation in CBC mode encryption affect two blocks?

Beginner to guitar playing - where should I begin?

Why did my folder names end up like this, and how can I fix this using a script?

What is the loud noise of a helicopter when the rotors are not yet moving?

Changing JPEG to RAW to use on Lightroom?

How many lines of code does the original TeX contain?

How does the OS tell whether an "Address is already in use"?

Half filled water bottle

Is the internet in Madagascar faster than in UK?

What's difference between place Linked and Embedded in Photoshop?

What happened to the HDEV ISS Experiment? Is it over?

How to say "I only speak one which is English." in French?



Uglify the react bundle js using webpack


Loop inside React JSXWhat do these three dots in React do?Programmatically navigate using react routerUsing Webpack for hot-loader and generating a physical file w/ ReactJs ES6webpack scss to css creating blank css file (vs 20017 .net core react)webpack 4 - app not loading at root in production modeReact with NodeJS and Webpack - bundled js big file sizeWebpack 4 not loading images from HTML filesWebpack v4 with multiple entries on a single page, chunks are duplicated unnecessarilyUsing webpack-dev-server 3 with parallel-webpack






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















I am trying to do the Uglify of my bundle js file using below



import webpack from 'webpack';
import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

const GLOBALS =
'process.env.NODE_ENV': JSON.stringify('production'), //This global makes sure React is built in prod mode. https://facebook.github.io/react/downloads.html
__DEV__: false // potentially useful for feature flags. More info: https://github.com/petehunt/webpack-howto#6-feature-flags
;

export default
debug: true,
devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: './src/index',
target: 'web',
output:
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
,
devServer:
contentBase: './dist'
,
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new ExtractTextPlugin('styles.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(
uglifyOptions:
output:
comments: false, // remove comments
,
compress:
unused: true,
dead_code: true, // big one--strip code that will never execute
warnings: false, // good for prod apps so users can't peek behind curtain
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true, // strips console statements
sequences: true,
booleans: true,

,
)
],
module:
loaders: [
test: /.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
test: /(.css)$/, loaders: ['style', 'css'],
test: /.eot(?v=d+.d+.d+)?$/, loader: 'file',
woff2)$/, loader: 'url?prefix=font/&limit=5000',
test: /.ttf(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
test: /.svg(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml',

test: /.json$/,
loader: 'json-loader'
,

test: /.(png
]

;


i am getting the below error making build



ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/query-string/index.js:9,0]









share|improve this question






























    0















    I am trying to do the Uglify of my bundle js file using below



    import webpack from 'webpack';
    import path from 'path';
    import ExtractTextPlugin from 'extract-text-webpack-plugin';

    const GLOBALS =
    'process.env.NODE_ENV': JSON.stringify('production'), //This global makes sure React is built in prod mode. https://facebook.github.io/react/downloads.html
    __DEV__: false // potentially useful for feature flags. More info: https://github.com/petehunt/webpack-howto#6-feature-flags
    ;

    export default
    debug: true,
    devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
    noInfo: true, // set to false to see a list of every file being bundled.
    entry: './src/index',
    target: 'web',
    output:
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
    ,
    devServer:
    contentBase: './dist'
    ,
    plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin(GLOBALS),
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(
    uglifyOptions:
    output:
    comments: false, // remove comments
    ,
    compress:
    unused: true,
    dead_code: true, // big one--strip code that will never execute
    warnings: false, // good for prod apps so users can't peek behind curtain
    drop_debugger: true,
    conditionals: true,
    evaluate: true,
    drop_console: true, // strips console statements
    sequences: true,
    booleans: true,

    ,
    )
    ],
    module:
    loaders: [
    test: /.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
    test: /(.css)$/, loaders: ['style', 'css'],
    test: /.eot(?v=d+.d+.d+)?$/, loader: 'file',
    woff2)$/, loader: 'url?prefix=font/&limit=5000',
    test: /.ttf(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
    test: /.svg(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml',

    test: /.json$/,
    loader: 'json-loader'
    ,

    test: /.(png
    ]

    ;


    i am getting the below error making build



    ERROR in bundle.js from UglifyJs
    SyntaxError: Unexpected token: operator (>) [./~/query-string/index.js:9,0]









    share|improve this question


























      0












      0








      0








      I am trying to do the Uglify of my bundle js file using below



      import webpack from 'webpack';
      import path from 'path';
      import ExtractTextPlugin from 'extract-text-webpack-plugin';

      const GLOBALS =
      'process.env.NODE_ENV': JSON.stringify('production'), //This global makes sure React is built in prod mode. https://facebook.github.io/react/downloads.html
      __DEV__: false // potentially useful for feature flags. More info: https://github.com/petehunt/webpack-howto#6-feature-flags
      ;

      export default
      debug: true,
      devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
      noInfo: true, // set to false to see a list of every file being bundled.
      entry: './src/index',
      target: 'web',
      output:
      path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
      publicPath: '/',
      filename: 'bundle.js'
      ,
      devServer:
      contentBase: './dist'
      ,
      plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin(GLOBALS),
      new ExtractTextPlugin('styles.css'),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin(
      uglifyOptions:
      output:
      comments: false, // remove comments
      ,
      compress:
      unused: true,
      dead_code: true, // big one--strip code that will never execute
      warnings: false, // good for prod apps so users can't peek behind curtain
      drop_debugger: true,
      conditionals: true,
      evaluate: true,
      drop_console: true, // strips console statements
      sequences: true,
      booleans: true,

      ,
      )
      ],
      module:
      loaders: [
      test: /.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
      test: /(.css)$/, loaders: ['style', 'css'],
      test: /.eot(?v=d+.d+.d+)?$/, loader: 'file',
      woff2)$/, loader: 'url?prefix=font/&limit=5000',
      test: /.ttf(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
      test: /.svg(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml',

      test: /.json$/,
      loader: 'json-loader'
      ,

      test: /.(png
      ]

      ;


      i am getting the below error making build



      ERROR in bundle.js from UglifyJs
      SyntaxError: Unexpected token: operator (>) [./~/query-string/index.js:9,0]









      share|improve this question














      I am trying to do the Uglify of my bundle js file using below



      import webpack from 'webpack';
      import path from 'path';
      import ExtractTextPlugin from 'extract-text-webpack-plugin';

      const GLOBALS =
      'process.env.NODE_ENV': JSON.stringify('production'), //This global makes sure React is built in prod mode. https://facebook.github.io/react/downloads.html
      __DEV__: false // potentially useful for feature flags. More info: https://github.com/petehunt/webpack-howto#6-feature-flags
      ;

      export default
      debug: true,
      devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
      noInfo: true, // set to false to see a list of every file being bundled.
      entry: './src/index',
      target: 'web',
      output:
      path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
      publicPath: '/',
      filename: 'bundle.js'
      ,
      devServer:
      contentBase: './dist'
      ,
      plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin(GLOBALS),
      new ExtractTextPlugin('styles.css'),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin(
      uglifyOptions:
      output:
      comments: false, // remove comments
      ,
      compress:
      unused: true,
      dead_code: true, // big one--strip code that will never execute
      warnings: false, // good for prod apps so users can't peek behind curtain
      drop_debugger: true,
      conditionals: true,
      evaluate: true,
      drop_console: true, // strips console statements
      sequences: true,
      booleans: true,

      ,
      )
      ],
      module:
      loaders: [
      test: /.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],
      test: /(.css)$/, loaders: ['style', 'css'],
      test: /.eot(?v=d+.d+.d+)?$/, loader: 'file',
      woff2)$/, loader: 'url?prefix=font/&limit=5000',
      test: /.ttf(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream',
      test: /.svg(?v=d+.d+.d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml',

      test: /.json$/,
      loader: 'json-loader'
      ,

      test: /.(png
      ]

      ;


      i am getting the below error making build



      ERROR in bundle.js from UglifyJs
      SyntaxError: Unexpected token: operator (>) [./~/query-string/index.js:9,0]






      reactjs webpack-4






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 27 at 19:58









      aman kumaraman kumar

      1,56210 silver badges16 bronze badges




      1,56210 silver badges16 bronze badges

























          1 Answer
          1






          active

          oldest

          votes


















          0















          I assume you're using npm query-sting package of the latest version 6 which is written using ES6 syntax and apparently UglifyJS version which is used by your webpack doesn't support this syntax (because apparently, you're using old Webpack version?). So instead you need to instal query-sting version 5. You can see this info on their README page in INSTALL section.



          But which webpack version do you use? Because if you're using latest Webpack 4 you should use optimization.minimize config instead which supports ES6+ syntax.






          share|improve this answer
























            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55385508%2fuglify-the-react-bundle-js-using-webpack%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0















            I assume you're using npm query-sting package of the latest version 6 which is written using ES6 syntax and apparently UglifyJS version which is used by your webpack doesn't support this syntax (because apparently, you're using old Webpack version?). So instead you need to instal query-sting version 5. You can see this info on their README page in INSTALL section.



            But which webpack version do you use? Because if you're using latest Webpack 4 you should use optimization.minimize config instead which supports ES6+ syntax.






            share|improve this answer





























              0















              I assume you're using npm query-sting package of the latest version 6 which is written using ES6 syntax and apparently UglifyJS version which is used by your webpack doesn't support this syntax (because apparently, you're using old Webpack version?). So instead you need to instal query-sting version 5. You can see this info on their README page in INSTALL section.



              But which webpack version do you use? Because if you're using latest Webpack 4 you should use optimization.minimize config instead which supports ES6+ syntax.






              share|improve this answer



























                0














                0










                0









                I assume you're using npm query-sting package of the latest version 6 which is written using ES6 syntax and apparently UglifyJS version which is used by your webpack doesn't support this syntax (because apparently, you're using old Webpack version?). So instead you need to instal query-sting version 5. You can see this info on their README page in INSTALL section.



                But which webpack version do you use? Because if you're using latest Webpack 4 you should use optimization.minimize config instead which supports ES6+ syntax.






                share|improve this answer













                I assume you're using npm query-sting package of the latest version 6 which is written using ES6 syntax and apparently UglifyJS version which is used by your webpack doesn't support this syntax (because apparently, you're using old Webpack version?). So instead you need to instal query-sting version 5. You can see this info on their README page in INSTALL section.



                But which webpack version do you use? Because if you're using latest Webpack 4 you should use optimization.minimize config instead which supports ES6+ syntax.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 27 at 23:34









                GProstGProst

                4,0002 gold badges12 silver badges36 bronze badges




                4,0002 gold badges12 silver badges36 bronze badges





















                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.







                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.



















                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55385508%2fuglify-the-react-bundle-js-using-webpack%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

                    Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

                    Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript