I want to remove certain file require/imports depending on the environment (development/production) using Webpack (v2.5.1) and UglifyJsPlugin.
Current situation
export const IMAGES = Object.assign(
{
PROFILE: require('images/profile.png'),
// ...
},
process.env.NODE_ENV !== 'production' && {'LOGO': require('images/logo.png')}
);
I have gotten so far that after the production build the outputted Javascript file doesn't contain an IMAGES.LOGO
key, but the required images/logo.png
file is present in the output.
I have a hunch that Webpack resolves the files before Uglify and afterwards keeps them, although they aren't used anywhere anymore after dead code elimination.
Is there a way of achieving it?
Webpack plugin configuration
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
comments: false,
sourceMap: true
})
By issue to Webpack GitHub repo, understood that the dead-code elimination doesn't work in this example. It works if I rewrite it more straightforward with an if
clause, as follows:
export const IMAGES = {
PROFILE: require('images/profile.png'),
// ...
};
if (process.env.NODE_ENV !== 'production') {
IMAGES.LOGO = require('images/logo.png');
}