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.
webpack@5.88.2
sideEffects
does not affect to the imported module.
Upd. Actually, it was wrong in my case.
sideEffects
affected to the imported module - that's why webpack leaves it in the code. It has an expression that matches with my-debug-module.js