Webpack compilation error "Critical dependency: the request of a dependency is an expression" solution

Webpack compilation error "Critical dependency: the request of a dependency is an expression" solution

When using webpack for packaging, if you encounter the following require syntax:

var mx = require("hpargxm".split("").reverse().join(""));

compilation will fail with a prompt of “Critical dependency: the request of a dependency is an expression”

This require syntax is correct, but webpack cannot process expressions in require, only strings, such as:

var mx = require('mxgraph');

This is because webpack needs to determine the file being referred to by require and read and merge its contents. As webpack cannot execute JavaScript code, when the content of require is an expression, webpack cannot correctly obtain file information. This is an inevitable bug of webpack, and the solution is for webpack to have the ability to execute JavaScript code. For example, it can embed a small JavaScript engine to parse the content of the expression.

In practical programming, if this problem occurs, you can simply modify the expression in the require to a string. In addition, when performing JavaScript code obfuscation, this bug of webpack may also be caused. The solution is to avoid using specific characters. For example, when using JShaman for JavaScript code obfuscation, you can configure "reserved words" to exclude specific strings from encryption.