Webpack 5号入境点

Question

这不是VSCode extension runs from development but does not work when packaged using webpack的重复，尽管症状是相同的，直到您使用开发人员工具查看实际错误。

使用webpack打包一个VSCode扩展名，创建一个包含我期望的文件的dist文件夹。

扩展工作在扩展主机中找到，但是当从生成的VSIX安装时，扩展激活方法不会被调用，尽管C:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20中存在所有预期的文件。

在Visual代码中，Developer Tools窗格显示

Activating extension 'pdconsec.vscode-print' failed: Cannot find module 
'c:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20\out\extension.js'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js.

这是一条错误的道路。它应该是

'c:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20\dist\extension.js'

这似乎是一个配置问题。我希望在webpack.config.js中找到罪魁祸首，但除了作为“输出”的一部分之外，该文件中没有出现"out“。这是整个文件以防有帮助。

//@ts-check

'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: './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',
    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: [{
      // vscode-nls-dev loader:
      // * rewrite nls-calls
      loader: 'vscode-nls-dev/lib/webpack-loader',
      options: {
      }
    }, {
      test: /\.ts$/,
      exclude: /node_modules/,
      use: [{
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            "module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
          }
        }
      }]
    }]
  },
}

module.exports = config;

回顾https://code.visualstudio.com/api/working-with-extensions/bundling-extension

在上面的示例中，定义了以下

：

• 目标是“节点”，因为扩展在Node.js上下文中运行。
• 是webpack应该使用的入口点。这与package.json中的主要属性类似，只不过您为webpack提供了一个“源”入口点，通常是src/exsion.ts，而不是"output“入口点。webpack绑定程序理解TypeScript，因此单独的TypeScript编译步骤是TypeScript输出配置，告诉webpack将生成的包文件放在哪里。按照约定，这是dist文件夹。在本示例中，webpack将生成一个dist/扩展名. In文件。解析和模块/规则配置支持TypeScript和JavaScript输入文件。

是什么控制了入口点的路径？

Answer 1

我注意到package.json包含

  "main": "./out/extension.js",

然后把这个改成

  "main": "./dist/extension.js",

似乎没有影响在扩展主机中运行。

通过碰撞版本并构建一个新的VSIX，我们发现入口点路径现在是正确的，并且激活方法正在运行。