WebPack output.library.type 变量未定义

Question

我正在使用简码学习 WebPack。在代码中，我们试图计算立方体和正方形。他们将假设按照以下 webpack.config.js.

存储在一个变量中

    const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDevelopment = process.env.NODE_ENV === 'development';

const config = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        library: {
            type: 'var',
            name: 'testVar'
        },
        filename: '[name].js'
    },
    mode: 'production',
    plugins: [

        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[id].css",
        }),
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1,
        }),

        new HtmlWebpackPlugin({
            hash: true,
            title: 'Video Player Play Ground',
            myPageHeader: 'Sample Video Player',
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,

                use: [
                    // fallback to style-loader in development
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.svg$/,
                use: 'file-loader'
            }
        ]
    },
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.js',
            '.scss'
        ]
    },
    optimization: {
        usedExports: true,
        runtimeChunk: false,
        minimize: false
    }
};

module.exports = config;

如上面的配置所示，我们将编译后的javascript存储在名为“testVar”的变量中。

当我们使用以下命令行代码“webpack --mode production”时，上述方法工作正常

在最终生成的 javascript 文件中，我们有一行等于 testVar = webpack_exports;

此外，testVar.start 工作正常。

但是当我们使用以下命令行“webpack serve --mode production”或“webpack serve”时，上述方法不起作用当我们运行一个本地服务器时，testVar.start是未定义的。我不确定我做错了什么。

以下是我们在 index.html 文件中调用启动函数的代码，我们在内部 javascript

中定义了该函数

    window.onload = function (){
    alert(testVar);
    console.log(testVar);
    if(testVar.start !== undefined)
    {
        alert(testVar.start);
        console.log(testVar.start);
        testVar.start(3,2);
    }
    else {

        alert("Start Function is undefined");
    }

}

下面还有来自 index.ts 和 math.ts 的代码见解。

    import {cube, square} from './math';

export function start(c:number, s:number) {
    console.log(cube(c));
    console.log(square(s));
}

export function square(x:number) {
    return x * x;
}
export function cube(x:number) {
    return x * x * x;
}

enter image description here

Answer 1

终于，我成功了:-)。我需要在 webpack.config.js

中添加以下行

devServer: {
    injectClient: false
},

参考如下URL:https://github.com/webpack/webpack-dev-server/issues/2484

别忘了投票。谢谢

WebPack output.library.type 变量未定义

WebPack output.library.type var is undefined

javascript

node.js

typescript

webpack

webpack-dev-server