VS Code扩展用webpack打包后Webview无法访问node_modules资源如何解决

以下是3种可直接落地的处理方案，可根据你的项目实际情况选择：

方案1：用webpack复制所需静态资源到输出目录（最推荐） #

适合资源量较大、需要单独维护静态资源的场景：

• 安装复制资源所需的依赖：npm install copy-webpack-plugin --save-dev
• 在webpack.config.js中添加插件配置，把你用到的node_modules资源统一复制到打包输出的固定目录，示例配置如下：

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // 其余原有webpack配置保持不变
  plugins: [
    new CopyPlugin({
      patterns: [
        // 复制codicons的所有分发文件
        {
          from: "node_modules/@vscode/codicons/dist",
          to: "assets/codicons"
        },
        // 其他用到的node_modules资源都可以在这里新增规则
        {
          from: "node_modules/[你用到的包名]/[资源路径]",
          to: "assets/[自定义存放路径]"
        }
      ],
    }),
  ],
};

• 修改原有资源Uri的生成逻辑，指向复制后的资源路径：

const codiconsUri = webview.asWebviewUri(
  Uri.joinPath(this.context.extensionUri, 'assets', 'codicons', 'codicon.css')
);

• 调整.vscodeignore规则，确保打包时不会排除复制后的资源目录，新增规则：!assets/

方案2：资源内联到bundle中（适合小体积资源） #

适合单个体积小的样式、字体、图片类资源：

• 安装对应的资源处理loader：npm install style-loader css-loader --save-dev
• 在webpack.config.js中添加资源处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type: 'asset/inline'
      }
    ]
  }
}

• 直接在webview对应的JS逻辑中引入资源，webpack会自动把资源内联到打包产物中，不需要再单独配置Uri和HTML的link标签：

import '@vscode/codicons/dist/codicon.css'

方案3：按需保留node_modules指定目录（改造成本最低） #

如果不想改动现有加载逻辑，可以直接调整.vscodeignore的排除规则，只排除不需要的node_modules内容，保留你用到的依赖包：

node_modules/*
!node_modules/@vscode/
!node_modules/[你用到的其他依赖包名]/

该方案不需要修改现有加载代码，但要注意仅保留必须的依赖包，避免生成的vsix体积过大。

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