webpack - localhost webpack 显示的文件目录?
问题描述
当我运行 webpack 开发服务器时,它给了我这样的 localhost 链接,http://localhost:8080/
当我进入时,我得到了我的文件目录,如下图所示。
只有当我单击我的html
目录(在我的情况下为构建文件夹)时,我才会重定向我的index.html
页面。
如果我index.html
从构建中删除它可以工作。但是我需要这个目录分发,因为我将html
在当前项目中有几个文件。
我的 webpack 版本
"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;
}
解决方案
通过将此配置添加到我的devServer解决了问题
devServer: {
overlay:true,
contentBase: "./build",
hot: true
},
推荐阅读
- javascript - 有没有更好的方法来编写这个正则表达式条件查找函数?
- java - 如何在另一个类构造函数 Book() 中使用来自 Author 类的 toString()?
- azure-active-directory - 使用 Azure Active Directory 访问 Azure Function 时,Blazor 客户端出现 CORS 错误
- regex - bash - 打印正则表达式捕获的组
- php - symfony 5中choicEntity中的列表显示
- r - 如何使用 makeLazyLoading 将包安装到包含撇号的目录?
- python-requests - 为什么 YouTube API v3 与它允许您在错误 400 之前下载的评论数量不一致?
- ruby - 清除 Ruby 中的 TraceBack
- javascript - 使用外部字体时 d3-legend 定位不一致
- azure - Azure Office 365 Powershell 身份验证数据