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;
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
add a comment |
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
add a comment |
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
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
reactjs webpack-4
asked Mar 27 at 19:58
aman kumaraman kumar
1,56210 silver badges16 bronze badges
1,56210 silver badges16 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered Mar 27 at 23:34
GProstGProst
4,0002 gold badges12 silver badges36 bronze badges
4,0002 gold badges12 silver badges36 bronze badges
add a comment |
add a comment |
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.
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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