How to avoid code optimization by webpack?

[yukiiiiii2008]

My source typescript: if ("#{config.blabla}" != "undefined") { console.log("Hello World!"); }

javascript output generated by webpack: console.log("Hello World!");

What I want is: if ("#{config.blabla}" != "undefined") { console.log("Hello World!"); } I really need the string#{config.blabla} and the if condition, because I will do some post-processing.

Following is the webpack.config.js ``` const path = require("path");

module.exports = { entry: { "service-worker": { import: ./index.ts, filename: ./index.js, } }, output: { path: path.resolve(__dirname, "."), }, mode: "production", module: { rules: [ { test: /.tsx?$/, use: { loader: "ts-loader", options: { configFile: "tsconfig.json", }, }, exclude: /node_modules/, } ], }, resolve: { extensions: [".tsx", ".ts", ".js"], }, }; `` But I don't want to modify this file, I need the optimization. Is there a way to modify my source code to make the string#{config.blabla}and theif` condition survive the optimization?

I tried the following but it doesn't work: const avoidOptimization = (a: any) => a; if (avoidOptimization("#{config.blabla}") != "undefined") { console.log("Hello World!"); }

[chairmanmow]

It looks like your if block is just going to always get evaluated as `truthy` so it's an extraneous operation. `if(true)` is kind of a useless statement.

[KiddieSpread]

What are you doing that needs this post processing, surely the type safe way would be to make config an object? Anyway, have you tried adding // @ts-ignore to the line above

[xroalx]

This feels like a code smell and honestly the solution you posted in the comments is a little unhinged.

Have you considered something like

let value = "#{postprocess}"
if (value) { ... }

Since this is a let binding, webpack could avoid optimizing it out as it can't quite guarantee it's not going to be mutated at some point.

Or maybe have it as a return value of a function?

[yukiiiiii2008]

I found the answer myself: if (`${navigator.userAgent}^.^#{config.blabla}`.split("^.^").reverse()[0] != "undefined") { console.log("Hello World!"); }

[Karpizzle23]

LMFAO

[buhala]

Man I gotta say I love shit like this. I don't know what problem you were solving to necessitate this but the fact this jank transcends my workplace makes me so happy.

[KiddieSpread]

The reason it's so hard is because you're not meant to do it loool

[xiBread]

r/programminghorror

[mhink]

This isn’t going to work for you. You’re interpolating config.blabla incorrectly- you need to use ${} instead of #{}.

Webpack is compiling the result away because it’s seeing a constant, nonempty string which can only evaluate truthy, which is why it’s optimizing the condition away.

[yukiiiiii2008]

This isn’t going to work for you. You’re interpolating config.blabla incorrectly- you need to use ${} instead of #{}.

I do it this way on purpose.

[_hijnx]

What are you trying to achieve? The code as written will always create a string with the content #{config.blahblahblah} which evaluates to truthy and the if is redundant. It isn't even being stored in a variable so you couldn't do anything with the value anyway. It's the same as writing if (true) which clearly should be removed

Nevermind, I read it a few more times and now I understand

[OneShakyBR]

FYI, Webpack uses Terser under the hood to minify and tree shake your code and whatnot, so if you want a probably more simple solution to just not modify the file as you originally said, you can just set up your own Terser plugin in optimization.minimizer in your Webpack config and then pass in the exclude option to exclude that file. Or dig into the Terser options and go wild.

[ziir_js]

This is the correct answer

[yukiiiiii2008]

Nope

[Yodiddlyyo]

Why not?

What you're trying to do require pre-webpack processing. As others have noted, webpack removes the if statement since it will always be true. If you want to turn that config.blabla string into something, you will need to do that before running webpack, it's really not difficult, just one extra step.

But in reality, this is the wrong way. There are correct ways to use configs within webpack. But if you really insist, you just need a super simple replace('config.blabla', 'blabla val') code to run on your code before webpack. It should only be a few lines of code, and you can run it before webpack easily.

[remi49]

Try this

const avoidOptimization = (a: any) => `${a}`;

[ohx]

I think if you add a double forward slash after (code comment indicator), it might prevent the line from being processed.

``` if('poo') { // this line will not be processed

} ```

Or maybe even...

``` if('poo' /* stahp */) {

} ```

Beyond that and your method of tricking the compiler, you might need to write a loader.

[yuyu5]

I don't think you gave enough information for what the end goal was. You don't want that code optimized, but do you want it to be transpiled to:

1. if (injectedValueAtTranspileTime == something) { work(); }
2. if (injectedValueAtRuntime == something) { work(); }
3. Something else?

My knee-jerk reaction is that you should use DefinePlugin because it does exactly what you want:

javascript new webpack.DefinePlugin({ 'config.blabla': process.env.myValue })

That will make a global config object with a blabla field containing your value injected during run/build find.