topic description

fastclick.js is used in the project to introduce vue and fastclick,FastClick.attach (document.body) into the entry file; the Event object is used in the source code, but inexplicably becomes a vue object, so an error of Cannot read property "stopImmediatePropagation" of undefined is reported

title code

entry js
import Vue from "vue"
import FastClick from" fastclick";
FastClick.attach (document.body);

webpack4 configuration
var path = require ("path");
var webpack = require (" webpack");
const HtmlWebpackPlugin = require ("html-webpack-plugin");
const {VueLoaderPlugin} = require (" vue-loader");
const MiniCssExtractPlugin = require ("mini-css-extract-plugin");
var appConfig = require (". / app.config.js");
var poxcyPath = appConfig.poxcyPath;
console.log (". /"+ poxcyPath)
const config = {

mode:process.env.NODE_ENV,
//mode: "development",
entry: {
    index: ["./src/index.js"]
}, // 
output: {
    path: path.resolve(__dirname, "./views"), // 
    publicPath: "./", // devServer
    filename: poxcyPath+"js/[name].js", // ,
    chunkFilename: poxcyPath+"js/[name].bundle.js",
},
resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
        "vue$": "vue/dist/vue.esm.js", 
        "@": path.resolve(__dirname,"./src"),
    }
},    
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: "vue-loader",             
        },                      
        {
            test: /\.css$/,
            use: [ 
                process.env.NODE_ENV !== "production"
                ? "vue-style-loader": 
                {
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: "../" //
                    }
                },     
                "css-loader",               
            ]
        },
        {
            test: /\.less$/,
            use: [
                process.env.NODE_ENV !== "production"
                ? "vue-style-loader": 
                {
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: "../" //
                    }
                },                    
              "css-loader",
              "less-loader",
              "postcss-loader"
            ]
        },            
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:"url-loader",
                options:{ // optionsbase64
                    limit:50000, // 50kbbase64,50kb
                    name: "images/[name].[hash:7].[ext]",
                }
            }]
        }
               
    ]
},
optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        //  node_modules 
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",

        },
        commons: {
          // async 
          chunks: "async",
          name: "commons-async",
          /**
           * minSize  30000
           * 
           *  minSize
           */
          minSize: 0,
          //  chunks 
          minChunks: 2
        }
      }
    },
    /**
     *  minchunks: Infinity
     *  webpack 
     *  true  name
     */
    runtimeChunk: {
      name: "manifest"
    }
  }, 
plugins: [
    new HtmlWebpackPlugin({
        filename: "booking.html",
        template: path.resolve(__dirname,"./views/booking.html")
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: poxcyPath+"css/[name].css",
        chunkFilename: poxcyPath+"css/[id].css"
    }),        
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
      
],
node: {

    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
},    
devtool: process.env.NODE_ENV=="development"?"cheap-module-eval-source-map":"source-map",

};

module.exports = config

title picture

console.log (Event) normally pops up Event () {[native code]}, but now it becomes
Vue$3 {_ uid: 0, _ isVue: true, $options: {. }, _ renderProxy: Proxy, _ self: Vue$3,. }