如何在Webpack开发模式下避免导入函数的冗长引用？

• 启用开发模式+Source Map配置
  开发环境下直接把Webpack的mode设为development，同时配置devtool为eval-source-map或者inline-source-map。这样Chrome调试时会直接映射回你的原始源代码，完全不用管打包后生成的_main_utils_name__WEBPACK_IMPORTED_MODULE_0__这类别名，调试时看到的就是原始的checkName函数和main/utils/name.js文件路径。
  示例配置：

  module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    // 其他Webpack配置...
  };
  

• 配置resolve别名优化导入（可选）
  虽然不是直接解决别名问题，但能让你的导入路径更简洁，配合Source Map后调试体验更好。比如把main/utils设为别名@utils：

  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        '@utils': path.resolve(__dirname, 'main/utils/'),
      },
    },
    // 其他配置...
  };
  

  之后导入就可以写成import { checkName } from '@utils/name.js';，调试时的路径也会更清晰。

• 旧版Webpack用NamedModulesPlugin（Webpack 4及以下）
  如果用的是Webpack 4或更早版本，开发模式下可以手动启用这个插件，让模块引用名用原始文件路径的简写，代替自动生成的冗长ID。Webpack 5在开发模式下已经默认开启这个功能，不用额外配置。
  示例配置：

  const webpack = require('webpack');
  module.exports = {
    mode: 'development',
    plugins: [
      new webpack.NamedModulesPlugin(),
    ],
    // 其他配置...
  };
  

内容的提问来源于stack exchange，提问作者Cholan Madala