Question

当我运行webpack dev服务器时，当我输入时，我会给出http://localhost:8080/这样的本地主机链接，如下图所示，我得到我的文件目录。

仅当我点击我的html目录（在我的情况下为构建文件夹）时，我才会重定向我的index.html页面。

如果我从构建中删除我的index.html，那么它就可以工作了。但我需要这个目录分发，因为我在当前项目中会有几个html个文件

我的网络包版

"webpack": "^4.8.3"

如何解决这个问题请帮助？

我的 webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

let conf = {
    entry:{
        index:  "./src/main/index.js"

    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename:"[name]bundle.js",
        publicPath:"dist/"
    },

    devServer: {
        overlay:true
    },
    module: {
        rules: [
            {
                test: /\.js/,
                loader:"babel-loader",
                //exclude: "/node_modules/"
            },
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                // If you are having trouble with urls not resolving add this setting.
                                // See https://github.com/webpack-contrib/css-loader#url
                                url: false,
                                minimize: true,
                                sourceMap: true
                            }
                        }, 
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                      ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename:"[name].css"
        }),
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"build/index.html",
            hash:true,
            chunks:["index"]
        }),

        new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'Popper': 'popper.js',
            "Bootstrap":"bootstrap.js"
        })
    ]
};

module.exports = (env, options) => {

    let production = options.mode === "production";

    conf.devtool = production ? false : "eval-sourcemap";

    return conf;
}

Answer 1

通过将此配置添加到 devServer

解决了问题

 devServer: {
        overlay:true,
        contentBase: "./build",
        hot: true
    },

Localhost webpack show的文件目录？

1 个答案: