My webpack config has DefinePlugin definition:
module.exports = env => {
const PROD = env.production;
const mode = env.mode || (PROD ? 'production' : 'development');
const plugins = [
new LicenseCheckerWebpackPlugin(...),
new CleanWebpackPlugin(...),
new webpack.BannerPlugin(...),
new CopyWebpackPlugin(...),
new MiniCssExtractPlugin(...),
new webpack.ProvidePlugin(...),
new webpack.DefinePlugin({
DEBUG: JSON.stringify(!PROD),
}),
new webpack.NormalModuleReplacementPlugin(...),
new VueLoaderPlugin(),
new ESLintPlugin(...),
];
return {
mode,
performance: {...},
entry: {...},
output: {...},
optimization: {
minimize: mode === 'production',
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
output: {
ascii_only: true,
},
},
}),
new CssMinimizerPlugin(),
],
},
stats: 'minimal',
watchOptions: { aggregateTimeout: 200 },
devtool: mode === 'production' ? false : 'inline-source-map',
resolve: {...},
module: {
rules: [...],
},
plugins,
};
};
JS code:
import { MyDebugModule } from './my-debug-module';
if (DEBUG) {
MyDebugModule();
}
There is no a call of MyDebugModule() in the final bundle, but webpack imports the code from my-debug-module.js when DEBUG is false.
If I completely remove the code if (DEBUG) { MyDebugModule(); } webpack removes the my-debug-module code.
[email protected]
sideEffects does not affect to the imported module.
Upd. Actually, it was wrong in my case.
sideEffectsaffected to the imported module - that's why webpack leaves it in the code. It has an expression that matches withmy-debug-module.js