Webpack 5 入口点答案

【问题标题】：Webpack 5 entry pointWebpack 5 入口点
【发布时间】：2020-11-11 13:40:29
【问题描述】：

这不是 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 Studio Code 中，开发人员工具窗格显示

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 中的 main 属性，只是你为 webpack 提供了一个“源”入口点，通常是 src/extension.ts，而不是一个“输出”入口点。 webpack 打包器理解 TypeScript，因此单独的 TypeScript 编译步骤是多余的。

输出配置告诉 webpack 将生成的包文件放在哪里。按照惯例，这是 dist 文件夹。在这个示例中，webpack 将生成一个 dist/extension.js 文件。解析和模块/规则配置用于支持 TypeScript 和 JavaScript 输入文件。

什么控制入口点的路径？

【问题讨论】：

标签： node.js typescript webpack vscode-extensions

【解决方案1】：

我注意到package.json 包含

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

并将其更改为

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

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

更新版本并构建新的 VSIX，我们发现入口点路径现在正确，并且激活方法运行。

【讨论】：