能否移除Webpack生成代码中的(0,...)表达式？

Webpack会将以下ES模块代码：

import { useState } from 'react';

useState(0);

转换为：

(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
// 压缩后会变成
// (0,a.b)(0);

我的应用里有数百个导入语句，每次都会多生成4个符号。我知道Webpack这么做是为了让函数调用时this等于undefined，但我用的所有库导出的函数都不依赖this关键字。能不能让Webpack直接生成下面的代码？

react__WEBPACK_IMPORTED_MODULE_0__.useState(0);

可以通过以下两种方式实现：

1. 使用Babel松散模式转换模块 #

在Babel配置文件（如.babelrc或babel.config.js）中，将ES模块转换为CommonJS时开启松散模式，Babel会生成直接的属性访问调用，Webpack就不会添加额外的逗号表达式语法：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: 'commonjs',
      loose: true
    }],
    '@babel/preset-react'
  ]
};

松散模式下，Babel会把import { useState } from 'react'转换为const { useState } = require('react')，调用时直接使用useState(0)，Webpack处理这类代码时不会生成(0, fn)的绑定解除语法。

2. 启用Webpack模块合并优化 #

开启Webpack的optimization.concatenateModules（生产模式默认已启用），它会将多个模块合并到一个函数作用域中，导入的函数会被直接内联调用，自然消除(0, fn)的写法：

// webpack.config.js
module.exports = {
  optimization: {
    concatenateModules: true
  }
};

这种方式更安全，仅在模块合并时消除不必要的语法，不会改变模块原有行为，同时还能减少代码体积、提升运行性能。

内容的提问来源于stack exchange，提问作者Ivan Adanenko