无法使用javascript运行网页包项目_Javascript_Html_Webpack_Webpack Dev Server

无法使用javascript运行网页包项目

javascript html webpack

无法使用javascript运行网页包项目,javascript,html,webpack,webpack-dev-server,Javascript,Html,Webpack,Webpack Dev Server,我得到了一个使用webpack的javascript聊天机器人项目，由于某些原因，我无法使它成功运行！通过使用npm start启动脚本运行Web pack，但页面为空这是index.html <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>Chatbot</title> <script src

我得到了一个使用webpack的javascript聊天机器人项目，由于某些原因，我无法使它成功运行！通过使用npm start启动脚本运行Web pack，但页面为空

这是index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>Chatbot</title>
    <script src="assets/lib/jquery.min.js"></script>
    <script></script>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>

网页包配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin')

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: './postcss.config.js'
                            }
                        }
                    }

                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'url-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    devServer: {
        contentBase: 'src/',
        // historyApiFallback: true,
        // disableHostCheck: true,
        port: process.env.PORT || 8080,
        // host: '0.0.0.0',
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        require('autoprefixer'),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.css"
        }),
        new CopyWebpackPlugin([
            { from: 'src/assets', to: 'assets' },
        ]),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        library: 'sc-chatbot-frontend',
        libraryTarget: 'umd' 
    },
    externals: {
        'jquery': 'jQuery',
        'url-loader': 'url-loader'
    }
};

我不确定在哪里使用这个example.js，或者需要在哪里定义？我试图包含index.html，但页面仍然为空

基本上，我运行npm start并显示一个空白页面，它应该显示聊天机器人

您在浏览器控制台中是否有任何错误？没有错误获取，library:'sc chatbot frontend'，libraryTarget:'umd'仅用于“libraries”。当您删除它时会发生什么？您在浏览器控制台中是否有任何错误？没有错误获取，library:'sc chatbot frontend'，libraryTarget:'umd'仅用于“libraries”。当你移除它时会发生什么？

import { Bot} from './Bot';

let bot = new Bot({

    "baseUrl": "xxxxx"
});

bot.init();

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin')

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: './postcss.config.js'
                            }
                        }
                    }

                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'url-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    devServer: {
        contentBase: 'src/',
        // historyApiFallback: true,
        // disableHostCheck: true,
        port: process.env.PORT || 8080,
        // host: '0.0.0.0',
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        require('autoprefixer'),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "main.css"
        }),
        new CopyWebpackPlugin([
            { from: 'src/assets', to: 'assets' },
        ]),
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        library: 'sc-chatbot-frontend',
        libraryTarget: 'umd' 
    },
    externals: {
        'jquery': 'jQuery',
        'url-loader': 'url-loader'
    }
};