Exclude node_module/package from production build webpack

Question

I am working on a project that uses "webpack": "^2.4.1",, it is a ReactJS project, I have installed the module airbnb/prop-types-exact, I am using this package for development purposes, where I would not want a user of a component I wrote to pass non-existing properties to that component.

I would like to remove this package when I build the app for production. I am using the Webpack Bundle Initializer to see the bundle size of airbnb/prop-types-exact, it is not that big, but I would like to have it removed from the production build, Is this achievable? With the webpack version that I am using or with a latter one?

I would appreciate any resources or ideas regarding this, thanks.

Answer 1

Following through an example from this Blog by Mark

And more references on these plugins: IgnorePlugin and DefinePlugin I have used the plugins as he did, which are IgnorePlugin and UglifyJsPlugin and then in the component where I am using the airbnb/prop-types-exact package, I am doing a check on which environment I am in like..

let exactProps ;
if (process.env.NODE_ENV === "development") {
    exactProps = require("prop-types-exact");
}

And depending on whether the exactProps has a value, meaning the require function has ran, and ,meaning the exactProps has the function from the prop-types-exact package, I am wrapping the my prop types with this function, .eg.

const propTypes = {
  someProp: PropTypes.iRequired
}

if (exactProps && typeof exactProps === "function") {
  MyComponent.propTypes = exactProps(propTypes);
} else {
  MyComponent.propTypes = propTypes;
}

And finally I export the MyComponent component

export MyComponent 

I am planning to move the wrapping of the component's prop types into a generic module, so that it is re-usable