Webpack5如何打包无法被静态引用的vscode-nls生成的本地化文件

开发VS Code扩展使用vscode-nls实现本地化功能时，对应的extension.nls.*.json文件不属于源码，是通过gulp build命令生成到out目录下的，无法被静态引用。webpack默认打包后这些文件会缺失，直接导致localize(key, default)方法始终返回默认值，只有将文件打入bundle才能彻底解决该问题。

常见无效方案说明 #

此前常用的静态文件拷贝方案，即通过CopyPlugin将nls文件复制到dist目录，配置如下：

plugins: [
  new CopyPlugin({
    patterns: [
      { from: "out/**/extension.nls.*.json", to: "dist" }
    ]
  })
]

该方案仅能将文件复制到dist目录，无法实现打入bundle的需求，无法覆盖以下核心场景：

• 扩展搭配WSL、Docker容器远程扩展使用时，文件系统会被重定向，只有打入bundle才能保证文件可正常访问
• 避免用户以不同身份安装和运行扩展时出现权限不足无法读取文件的问题，减少不合理的差评

可行配置方案 #

你可以通过主动引入nls文件配合vscode-nls的bundle配置，将所有本地化资源打入webpack bundle：

1. 首先在webpack.config.js中添加路径别名，方便引用out目录下生成的nls文件：

const path = require('path');
module.exports = {
  // 保留你的原有webpack配置，新增以下resolve配置
  resolve: {
    alias: {
      'nls-output': path.resolve(__dirname, 'out')
    }
  }
}

2. 在扩展入口文件（通常为extension.ts/extension.js）顶部添加代码，主动加载所有nls文件：

// 扫描out目录下所有nls文件，webpack会自动将其内容打入bundle
const nlsFileContext = require.context('nls-output', true, /extension\.nls\..*\.json$/);
nlsFileContext.keys().forEach(fileKey => nlsFileContext(fileKey));

3. 调整vscode-nls初始化配置，指定从bundle读取资源，不要走文件系统读取：

import * as nls from 'vscode-nls';

const localize = nls.config({
  messageFormat: nls.MessageFormat.bundle,
  bundleFormat: nls.BundleFormat.standalone
})();

完成以上配置后重新打包，所有本地化资源都会被打入bundle，无需依赖本地文件系统读取即可正常加载多语言内容。

内容的提问来源于stack exchange，提问作者Peter Wone