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]
If you aren't worried about supporting older browsers, webpack v4+ will minify your code by default in production mode:
webpack --mode=production
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):
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
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:
Install babel-minify-webpack-plugin
npm install babel-minify-webpack-plugin --save-dev
Or:
yarn add babel-minify-webpack-plugin --dev
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
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',
}]
}
]
},
};