是否有用于捆绑 webpack 插件的 webpack 配置？

Question

我正在创建一个 webpack 插件。我使用打字稿来编写插件代码。在将插件代码发布到 NPM 之前，我试图捆绑插件代码。我发现我的插件 class 不是构造函数。

请在下面找到目录结构：-

tsconfig.json:-

{
    "compilerOptions": {
        // Target latest version of ECMAScript.
        "target": "es5",
        // Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'.
        "module": "commonjs",
        // Search under node_modules for non-relative imports.
        "moduleResolution": "node",
        // Process & infer types from .js files.
        "allowJs": true,
        // Don't emit; allow Babel to transform files.
        "noEmit": false,
        "pretty": true,
        // Enable strictest settings like strictNullChecks & noImplicitAny.
        "strict": true,
        // Disallow features that require cross-file information for emit.
        "isolatedModules": true,
        // Import non-ES modules as default imports.
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "outDir": "dist/"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "dist",
        "node_modules"
    ]
}

Webpack 配置：-

const path = require('path');

module.exports = {
    name: 'log-stylizer-webpack-plugin',
    entry: './src/index.ts',
    output: {
        filename: 'index.bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
    target: 'node',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: ['.ts']
    }
};

Answer 1

为了使用 webpack 将事物构建为库，您必须指定选项 output.libraryTarget 来导出事物。

{
  output: {
    // ...
    // `umd` is always a best choice in most cases
    // since it would work for all kind of module styles
    libraryTarget: 'umd',
  }
}

是否有用于捆绑 webpack 插件的 webpack 配置？

Is there a webpack config to bundle webpack plugin?

node.js

typescript

webpack

webpack-plugin