WebPack output.library.type var 未定义 [英] WebPack output.library.type var is undefined

问题描述

我正在使用短代码学习 WebPack.在代码中，我们试图计算立方体和正方形.他们将假设按照以下 webpack.config.js 存储在一个变量中.

I am learning WebPack with a shortcode. In the code, we are trying to calculate the cube and square. They will suppose to store in a variable as per the following 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"的变量中.

As shown in the above config, we store the compiled javascript in the variable with the name "testVar".

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

The above approach working fine when we are using the following command line code "webpack --mode production"

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

In the final generated javascript file we have a line which equals to testVar = webpack_exports;

此外，testVar.start 工作正常.

Also, testVar.start is working fine.

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

But the above approach is not working when we are using the following command line "webpack serve --mode production" or "webpack serve" When we run a local server, the testVar.start is undefined. I am not sure what I am doing wrong.

以下是我们在 index.html 文件中用来调用 start 函数的代码，这是我们在内部 javascript 中定义的

Following is the code we are using in the index.html file to call the start function, which we defined in our internal 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 的代码洞察.

Also following is the code insight from index.ts and 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;
}

在此处输入图片说明

推荐答案

最后，我让它工作了 :-).我需要在我的 webpack.config.js 中添加以下行

Finally, I got it working :-). I need to add the following line in my webpack.config.js

devServer: {
    injectClient: false
},

以下是参考网址:https://github.com/webpack/webpack-dev-server/issues/2484

不要忘记投票.谢谢.

这篇关于WebPack output.library.type var 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！