是否有 webpack 配置来捆绑 webpack 插件？

问题描述

我正在创建一个 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']
    }
};

解决方法

为了使用 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',}
}