如何使用webpack正确打包vscode扩展

Question

我遇到的问题是，当我运行vsce package时，仍然会收到此扩展由3587个单独的文件组成。出于性能原因，您应该捆绑您的扩展:警告，我按照捆绑扩展步骤操作，调试正常。

package.json

{
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "webpack --mode production",
    "webpack": "webpack --mode development",
    "webpack-dev": "webpack --mode development --watch",
    "compile": "npm run webpack",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install"
  },
}

webpack配置是打包扩展示例的精确副本。

- Syler

Answer 1

这似乎是你忘记将源目录添加到 .vscodeignore 中，因此它们仍然被打包到发布版中。这个忽略文件应该至少包含以下内容，以及运行时不需要的其他任何内容：

src/**
node_modules/**

- Gama11

---

你能检查一下我的答案吗？扩展程序已经可以工作了，但是捆绑包仍然在抱怨不正确。如果我删除客户端和服务器的node_modules文件夹，扩展程序就无法工作。 - Mauricio Gracia Gutierrez

Answer 2

如果您正在使用既有客户端又有服务器文件夹的语言服务器扩展，如果将客户端和服务器的 node_modules 排除在捆绑包之外，则在安装并首次启动扩展时，它将会失败。

.vscodeignore 包含以下内容

.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore

此外，关于 webpack.config.js 的文档有点过时了，你需要将 'use strict' 包装在一个带有所有设置的函数中。

entry 设置已根据我的需求进行更改。

//@ts-check

(function () {
  'use strict';

  const path = require('path');

  /**@type {import('webpack').Configuration}*/
  const config = {
    target: 'node', // vscode extensions run in a Node.js-context  -> https://webpack.js.org/configuration/node/

    entry: './client/src/extension.ts', // the entry point of this extension,  -> https://webpack.js.org/configuration/entry-context/
    output: {
      // the bundle is stored in the 'dist' folder (check package.json),  -> https://webpack.js.org/configuration/output/
      path: path.resolve(__dirname, 'dist'),
      filename: 'extension.js',
      clean: true, //clean the dist folder for each time webpack is run
      libraryTarget: 'commonjs2',
      devtoolModuleFilenameTemplate: '../[resource-path]'
    },
    devtool: 'source-map',
    externals: {
      vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed,  -> https://webpack.js.org/configuration/externals/
    },
    resolve: {
      // support reading TypeScript and JavaScript files,  -> https://github.com/TypeStrong/ts-loader
      extensions: ['.ts', '.js']
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader'
            }
          ]
        }
      ]
    }
  };
  module.exports = config;
}());

- Mauricio Gracia Gutierrez