In order to drop the file size for the react app, I had to use the UglifyJsPlugin from Webpack, and it dropped from 1.5MB to ~450KB which is still a lot for the small app that I created BUT usable.
The problem is that now it shows an error because it says that I'm trying to uglify a development version of ReactJS, and instead I should use the production version, but nothing works. I've searched and searched online, tried plenty of different solutions, nothing removed the following error:
This is my code:
gulp.task('js', function() {
return gulp.src(['./source/components/index.js'])
.pipe(gulpWebpack({
output: {
filename: "./index.js",
},
module: {
loaders: [
{
test: /\.js$/,
include: __dirname + "/source",
exclude: /(node_modules|bower_components|dist)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'autoprefixer-loader?{browsers:["> 1%"]}',
'sass-loader'
]
},
{
test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
loader: "url-loader"//?limit=10000
},
{
test: /\.html$/,
loader: "html-loader"
}
]
},
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
] : []
}))
.pipe(gulp.dest('./dist/scripts'));
});
I tried a bunch of ideas I found online, like aliases (by changing 'react' to '~react', etc..., but get more errors and it doesn't fix the original error).
gulp.task('js', function() {
return gulp.src(['./source/components/index.js'])
.pipe(gulpWebpack({
output: {
filename: "./index.js",
},
resolve: {
alias: process.env.NODE_ENV === 'production' ? {
"~react": path.join(__dirname, './node_modules/react/dist/react.min.js'),
"~react-dom": path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
} : {
"~react": path.join(__dirname, './node_modules/react/react.js'),
"~react-dom": path.join(__dirname, './node_modules/react-dom/index.js')
}
},
module: {
noParse: [
path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
],
loaders: [
{
test: /\.js$/,
include: __dirname + "/source",
exclude: /(node_modules|bower_components|dist)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'autoprefixer-loader?{browsers:["> 1%"]}',
'sass-loader'
]
},
{
test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
loader: "url-loader"//?limit=10000
},
{
test: /\.html$/,
loader: "html-loader"
}
]
},
plugins: process.env.NODE_ENV === 'production' ? [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
] : []
}))
.pipe(gulp.dest('./dist/scripts'));
});
But then I get this error:
If I don't Uglify, everything is good, BUT the file size is so big the app takes a bunch to load, which is bad for a website.