Search code examples
webpackwebpack-2dead-code

How to eliminate dead webpack requires/imports?


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
})

Solution

  • 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');
    }