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

【问题标题】：Is there a webpack config to bundle webpack plugin?是否有用于捆绑 webpack 插件的 webpack 配置？
【发布时间】：2021-04-28 09:45:32
【问题描述】：

我正在创建一个 webpack 插件。我已经使用打字稿对插件进行编码。我试图在将插件代码发布到 NPM 之前捆绑它。我收到异常，我的插件类不是构造函数。

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

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']
    }
};

【问题讨论】：

标签： node.js typescript webpack webpack-plugin

【解决方案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',
  }
}

【讨论】：