Javascript 如何在网页包项目中从开发者控制台调用函数_Javascript_Express_Webpack_Module_Console

Javascript 如何在网页包项目中从开发者控制台调用函数

javascript express webpack module

Javascript 如何在网页包项目中从开发者控制台调用函数,javascript,express,webpack,module,console,Javascript,Express,Webpack,Module,Console,我有一个TS应用程序，其中我有一个express服务器。前端由webpack提供服务。我同时使用npm包运行服务器和前端一切正常。我唯一的要求是使用开发者控制台从index.js调用add和sub函数 package.json：- { "name": "delmelater", "version": "1.0.0", "description": "delmel

我有一个TS应用程序，其中我有一个express服务器。前端由webpack提供服务。我同时使用npm包运行服务器和前端

一切正常。我唯一的要求是使用开发者控制台从index.js调用add和sub函数

package.json：-

{
    "name": "delmelater",
    "version": "1.0.0",
    "description": "delmelater",
    "main": "server.js",
    "scripts": {
      "start": "concurrently  \"tsc\" \"webpack serve\" \"node server.js\" ",
      "build:dev": "concurrently  \"tsc\" \"webpack --watch\" \"node server.js\"",
      "lint": "eslint . --fix && echo 'Lint Complete.'",
      "check-types": "tsc"
    },
    "author": "aryan",
    "license": "UNLICENSED",
    "dependencies": {
        "@types/node": "^12.20.4",
        "concurrently": "^6.2.0",
        "css-loader": "^5.1.0",
        "sass-loader": "^11.0.1",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1"
    },
    "devDependencies": {
        "@babel/core": "7.2.2",
        "@babel/plugin-transform-runtime": "^7.13.8",
        "@babel/preset-env": "7.3.1",
        "@babel/preset-react": "7.0.0",
        "@babel/preset-typescript": "^7.13.0",
        "@typescript-eslint/eslint-plugin": "^4.16.1",
        "@typescript-eslint/parser": "^4.16.1",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.5",
        "babel-plugin-transform-imports": "^2.0.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "copy-webpack-plugin": "4.6.0",
        "eslint": "^7.21.0",
        "html-webpack-plugin": "^5.2.0",
        "path": "0.12.7",
        "ts-loader": "^8.0.17",
        "webpack": "^5.24.2",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2",
        "@types/express": "^4.17.12",
        "@types/node": "^15.6.1",
        "express": "^4.17.1",
        "typescript": "^4.3.2"
    }
}

webpack.config.json：-

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: ['babel-polyfill', path.join(__dirname, "public/src/index.js")],
    mode: 'development',
    output: {
        publicPath: './public',
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
    },
    plugins: [
    ],
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, './public'),
        hot: true,
        open: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|jpg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader',
            },
            {
                test: /.(ts|tsx)$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.ts',  '.js'],
    },
    devtool: 'eval-cheap-source-map',
};

index.html：-

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <link rel='stylesheet' type='text/css' href='./index.css' />
    <title>delmelater</title>
  </head>
  <body>
      <div>
          <h1>ADDITION OF 2 NO's:- </h1>
          <h2>SUBTRACTION OF 2 NO's:- </h2>
      </div>
    <script src="./bundle.js"></script>
  </body>

我引用了下面的帖子，但它对我不起作用

"use strict";
const add = (num1, num2) => num1 + num2;
const sub = (num1, num2) => num1 - num2;
document.querySelector('h2').innerHTML += sub(200, 100);
document.querySelector('h1').innerHTML += add(100, 200);