如果index.html不直接位于输出根中，如何为webpack-dev-server配置各种路径选项？
对于webpack-dev-server的路径配置，可以通过以下几种方式来实现：
- 使用output.publicPath配置项：在webpack配置文件中，可以通过设置output.publicPath来指定webpack-dev-server的路径选项。publicPath表示webpack在打包时生成的文件在浏览器中的访问路径。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将publicPath设置为"/public/"，这样webpack-dev-server会将打包后的文件输出到public文件夹，并且在浏览器中访问时会自动添加"/public/"前缀。
- 使用devServer.contentBase配置项：在webpack配置文件中，可以通过设置devServer.contentBase来指定webpack-dev-server的根目录。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将contentBase设置为path.resolve(__dirname, 'public')，这样webpack-dev-server会将public文件夹作为根目录，并且在浏览器中访问时会自动查找index.html文件。
- 使用devServer.historyApiFallback配置项：在webpack配置文件中，可以通过设置devServer.historyApiFallback来指定webpack-dev-server的路由配置。historyApiFallback用于处理单页应用中的路由问题，当访问的路径不存在时，会自动重定向到指定的页面。例如，如果你的index.html文件位于根目录下的public文件夹中，可以将historyApiFallback设置为{ index: '/public/index.html' }，这样当访问的路径不存在时，会自动重定向到/public/index.html。
需要注意的是，以上配置项可以单独使用，也可以组合使用，根据具体的需求进行配置。另外，关于腾讯云的相关产品和产品介绍链接地址，可以参考腾讯云官方文档进行查阅。
相关·内容
我开始迁移webpack 2.2，我在这里面临的问题是配置webpack-dev-server，我的构建脚本是
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/"
降至误差以下
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src/app/index.js content-base ./src
浏览 2提问于2017-03-11得票数 2
我有下面的webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
entry: "./src/index.js",
mode:
浏览 2提问于2020-06-15得票数 1
回答已采纳
如何为默认根网页设置index.html？
application: dfischerdna version: 1
runtime: python api_version: 1
handlers:
- url: /
static_dir: static_files
当访问者输入时，这非常有效
但是，我希望当他键入此命令时，index.html网页将会显示出来。 ->转到第404页
浏览 0提问于2010-01-30得票数 3
回答已采纳
1回答
我是webpack的新手。我正在学习反应，并为它营造使用webpack的环境。
我有webpack-config.js
var path = require('path');
module.exports = {
mode: 'production',
entry: './script.js',
output:
{
path: path.resolve(__dirname, 'src'),
filename: 'transpiled.js'
浏览 0提问于2018-06-25得票数 4
回答已采纳
所以，在将bundle.js链接到我的index.html之后，基本上我的javascript就无法工作了。每个函数都是未定义的，即使bundle.js正在加载，我可以通过开发工具中的源代码访问它。但是，如果我直接链接我的javascript文件"app.js“，一切都会按预期工作。我想我的webpack设置很可能会有问题，因为这是我第一次设置它。我将很高兴得到关于这个webpack.config的任何其他提示。提前感谢:)
这是我的package.json：
{
"name": "name",
"version": "1.0.0
浏览 42提问于2018-10-30得票数 0
通常，我是后端开发人员，但开始学习前端的东西。我做了一个例子应用程序从角度教程，并试图建立我自己的小应用现在。
我坚持简单的问题-当我试图加载静态图像(例如。它返回404错误代码。看起来我错过了一些配置，我不知道它会是什么。
加载图像代码：
<img src="images/logo.png" alt="Logo" width="48" height="48"/>
结构：
web
- app
-- assets
-- images
-- js
-- model
-- stylesheets
-- *.ts
-- *
浏览 3提问于2016-10-12得票数 3
回答已采纳
我目前有以下.htaccess
<IfModule mod_rewrite.c>
Options Indexes FollowSymLinks
RewriteEngine On
RewriteBase /production/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
浏览 0提问于2017-10-03得票数 1
我有一个用create-react-app构建的，托管在netlify中。
在这个中，提到了我需要为SPA编写重定向规则。
/* /index.html 200
但是重定向到index.html是不起作用的，因为没有使用该URL呈现任何视图。我还尝试重定向到/，如下所示
[[redirects]]
from = "/*"
to = "/"
但这也不起作用。
如何为create-react-app执行通用重定向
浏览 1提问于2019-05-05得票数 20
回答已采纳
当尝试设置SCSS以使用Webpack在我的React应用程序上运行样式时，我会收到以下错误：
Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'
在浏览器中：
Uncaught Error: Cannot find module "/styles/main.scss"
我的webpack.config.js配置如下：
v
浏览 5提问于2017-02-26得票数 4
回答已采纳
我的index.html文件如下所示
<html>
<body>
<script src="public/jquery-latest-min.js"></script>
/*But this script file is not importing and creating error */
</body>
</html>
app.js代码是
var express = require('express'),
app =
浏览 1提问于2014-12-03得票数 0
我可以用我的webpack.config.js像现在一样webpack，当我在浏览器中查看我的index.html而不使用webpack-dev-server时，这些变化会被反映出来。
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'src/client/app/');
var BUILD_DIR = path.resolve(__dirname, '
浏览 1提问于2017-11-08得票数 0
回答已采纳
我用webpack2创建了一个React项目，并使用webpack开发服务器预览了结果.首先，我使用CLI来启用HMR，如下所示：
webpack-dev-server --inline --hot
一切都很好。
然后，我想通过设置webpack.config.js来启用HMR，但是失败了。浏览器没有显示图像，控制台总是显示404错误，如下所示：
我一整天都在寻找这些方法，并多次更改了配置文件，但是没有什么不同。任何帮助都是非常感谢的。
我的项目结构：
|--dist
| |--index.html
|--src
| |--images
| | |--logo.png
| |--j
浏览 1提问于2017-06-09得票数 0
回答已采纳
我的文件夹结构如下所示
src
main
clojure
.../core.clj
webapp
WEB-INF
index.html
在我的core.clj中，我有一个用于jetty的main函数
(ns com.lapots.platform.web.core
(:use ring.adapter.jetty)
(:use com.lapots.platform.web.router.core)
(:require [ring.
浏览 0提问于2017-03-26得票数 0
回答已采纳
我有一个使用各种node_modules构建的简单React应用程序。当我将应用程序捆绑到index.html和app.js中并从webpack-dev-server实例中提供它时，应用程序运行得很好。我还试图直接指向chrome中的index.html文件，希望它能像正常一样运行应用程序，因为它可以访问捆绑的app.js，但没有加载任何内容。
我的问题是，当我直接访问index.html文件时，webpack-dev-server提供了什么我没有的东西？我本以为应用程序所需的一切都包含在app.js包中？
目前我没有任何需要担心的静态资产，这是一个非常简单的react应用程序，它应该呈现一些
浏览 3提问于2017-09-25得票数 1
我已经创建了一个React，默认情况下，index.html会转到公用文件夹。因此，当我运行npm命令时，index.html需要位于公用文件夹，否则我将得到以下错误：
...
react-scripts start
Could not find a required file.
Name: index.html
...
因此，我的问题是，是否有任何方法可以将index.html更改为根路径。
我的意思是：
(这是默认的)
my-app/
README.md
node_modules/
package.json
public/
index.html
fav
浏览 0提问于2018-09-24得票数 3
这是一个库，我不一定会这样调用：
app.use('/node_modules', express.static('node_modules'));
我必须以不同的方式来做这件事。因为我无法控制服务器如何为静态资产提供服务。假设我有这样的结构：
project/
node_modules/
xxx/
asset.js
index.html
app.js
在app.js中，我有：
const express = require('express');
const app = e
浏览 7提问于2018-12-08得票数 1
1回答
我和其他html有多个文件夹，我想把它们都链接到彼此之间。
文件夹结构如下所示：
Main Folder
index.html
nav.js
Project Folder
project1.html
project2.html
images
image1.png
image2.png
这就是我试图链接的方式：
<a href="/Project Folder/project1.html"></a> <a href="./Project Folder/project1.h
浏览 7提问于2022-08-14得票数 -1
回答已采纳
1回答
配置Webpack输出包
、、、、
我是新的反应发展，Webpack已经建立了一个样板，遵循这个。
我很难理解webpack是如何工作的，并且可以跟随本文，但我很难理解我的特定webpack.config.js是如何创建它所做的文件和包的，以及如何修改这些文件和包以实现一些自定义功能。
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude
浏览 0提问于2018-06-12得票数 3
回答已采纳
1回答
我用的是Webpack-4。当前的行为是，当运行webpack-dev-server时，/build下的文件根本不会更新，它显示的是文件目录。
如果我删除/build下的文件，webpack-dev-server给出的文件不能获取/。我假设，它应该从内存中加载它们。
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename:
浏览 0提问于2018-04-16得票数 2
回答已采纳
我先从webpack说起。
我已经能够像这样向webpack指定webpack.config.js的位置：
"webpack --config ./App/webpack.config.js"
现在我也在尝试使用带有该文件的webpack开发服务器，但是我找不到如何为它指定webpack.config.js位置。
这是我的package.json的相关部分
"scripts": {
"start": "webpack-dev-server --config ./App/webpack.config.js --progress --co
浏览 7提问于2016-09-07得票数 45
假设我的index.js和我的index.html在同一个目录中。还有一个包含styles.css的文件夹css。
/
|- index.js
|- index.html
|- css/styles.css
在index.html中，我可以用相对路径指定我的css样式，它将指向css/styles.css，它相对于我的index.html
<link rel="stylesheet" href="css/styles.css">
但是，在index.js中，当我的express服务器接收到GET请求而不是
app.get("/
浏览 0提问于2021-03-01得票数 1
1回答
我看过几个类似问题的人的问答，但我仍然找不到代码中的错误。
运行时没有创建bundle.js文件：**
这是我的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cocinando Con Lalinde</title>
</head>
<body>
<div id="app"></div>
<script
浏览 1提问于2018-01-10得票数 4
回答已采纳
我有以下webpack配置：
webpack.common.js
const path = require('path');
module.exports = {
entry: './src/index.js',
watchOptions: {
ignored: [
path.resolve(__dirname, '.git'),
path.resolve(__dirname, 'node_modules'),
]
},
module: {
rules: [],
浏览 4提问于2022-01-06得票数 1
回答已采纳
2回答
我只是一个初学者，我遇到了一个问题，当启动项目的前端。
当我运行以下命令时：
npm run dev
我得到以下错误：
NODE_ENV=development webpack-dev-server -模式=开发-进度-端口8081 -打开module.js:550抛出错误；^错误:找不到模块‘vue-加载程序/lib/plugin’.
在中显示了全部错误
package.json
{
"name": "absolutum",
"description": "My webpack project",
浏览 3提问于2020-09-16得票数 0
1回答
电子无法获取当前文件路径
、、、
我正在用electron和react编写一个桌面应用程序。我在我的项目中使用create-react-app，我先运行npm run start在http://localhost:3000中运行我的应用程序，然后在index.js of electron中运行
win.loadURL(url.format({
pathname: process.env.NODE_ENV === "development" ?
"localhost:3000":path.join(__dirname, 'build/index.ht
浏览 0提问于2018-04-15得票数 0
16回答
我的文件结构是：
dist
css
style.css
index.html
js
bundle.js
src
css
style.css
index.html
js
main.js
node_modules
webpack.config.js
package.json
我的webpack.config.js看起来像：
module.exports = {
entry: './src/js/main.js',
output: {
path: __dirname,
filena
浏览 5提问于2016-08-21得票数 43
回答已采纳
我很难为WebPack 3设置正确的配置。首先，我的所有项目文件都位于一个文件夹(根)中。到目前为止一切都很顺利。现在我的项目看起来是：
dist <folder> ---- For future builds
node_modules <folder> ----
public <folder> ---- Probably for the future purpose to serve static: css, images, js, icons...
server <folder> ---- Server.js (expre
浏览 0提问于2018-01-29得票数 1
回答已采纳
我正在构建一个angular应用程序，但无论我做什么，我的路由似乎都是错误的。我的导航栏指令不能像css文件一样被找到。我已经看了很多不同的帖子了，但是我还是不知道我做错了什么。任何帮助都是最好的！
project1/js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href=".
浏览 12提问于2017-01-08得票数 0
回答已采纳
3回答
试图把webpack推到h页
、、、、
我尝试将我的应用程序构建与/webpack一起推到gh页面。但是，我在网上找到的所有东西都显示了网页没有渲染的地方。我从控制台得到的是关于github的错误无法获得bundle.js文件。
我想我可能错过了什么但搞不懂。我也试着推到Heroku，得到同样的结果。
这是。
package.json
{
"name": "twitch",
"version": "0.1.0",
"description": "",
"main": "index.js",
浏览 3提问于2016-06-07得票数 4
回答已采纳
我正在收到上面提到的错误，我已经在web应用程序中获得了xml文件hibernate.cfg.xml。此外，我在WebINF lib文件夹下有hibernate所需的完整jar文件。
这是完整的错误
Mar 11, 2014 4:11:18 PM org.apache.catalina.core.AprLifecycleListener init
INFO: The APR based Apache Tomcat Native library which allows optimal performance in production environments was no
浏览 1提问于2014-03-11得票数 0
回答已采纳
1回答
更新：
我上传了一个示例项目到github：
在这个示例项目中，我有两个相同的index.js文件。一个在项目根下，另一个在/src下。
在npm install之后，运行以下命令webpack-dev-server --config webpack.dev.config.js。您应该看到这个错误：
ERROR in ./index.js
Module parse failed: /Users/cheng/Dev/debug-webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handl
浏览 0提问于2016-03-14得票数 2
回答已采纳
我使用webpack和html-webpack-plugin用生成的脚本包(比如bundle.[hash].js )更新我的index.html文件。
然后，我必须运行webpack-dev-server，这样我就可以将该包加载到内存中，并利用热模块替换。
这会使代码编译两次。
但是，我希望webpack-dev-server也能够使用新的bundle.[hash].js更新index.html文件，因为现在我必须先运行webpack，然后运行webpack-dev-sever。编译两次似乎很奇怪。
同样，我运行webpack的唯一原因是使用包的新散列更新我的index.html文件。如果我可
浏览 29提问于2016-06-15得票数 6
我是新的反应，我跟随 (创建一个新的应用程序)。
所以每次我需要运行这个应用程序，它都需要启动一个服务器。当我试图在chrome中打开构建版本(直接打开HTML )时，什么都不会显示。
然后，我尝试使用教程从零开始设置自己的React环境。在这里，在我构建项目后，我可以直接打开HTML的铬和内容显示。
我的问题是：
为什么第一种方法不显示网页，而第二种方法没有启动服务器就运行？
编辑
第二种方法的package.json：
{
"name": "practice",
"version": "1.0.0",
"
浏览 3提问于2017-09-21得票数 2
回答已采纳
我试图使用html、css和javascript制作一个单一的页面应用程序。我想给它加上一些路线。我已经用nodejs和express制作了服务器端呈现的网站。如何为SPA创建路由系统？我们可以使用快递进行客户端路由吗？如果没有，是否有其他可供选择的客户端路由？
浏览 3提问于2021-01-11得票数 2
我正在尝试在运行.Net的Ubuntu上使用Nginx Core2来托管一个Angular 4CLI项目。当我启动应用程序时，我可以访问托管页面，但当浏览器尝试下载各种包时，它会失败并返回500个错误。在Windows上一切似乎都运行得很好。
我在为nginx启用的站点中的配置是
server {
listen 80;
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
prox
浏览 1提问于2018-02-10得票数 0
2回答
以下是我的React应用程序的webpack.config.js文件
module.exports = {
entry: 'index.js',
output: {
filename: 'bundle.js',
path: '/.'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_com
浏览 0提问于2017-04-11得票数 1
我修改了webpack.config.js以添加一个名为index.html的本地文件，代码如下:
new CopyWebpackPlugin([
{ from: { glob: "index.html" } },
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResources
浏览 2提问于2020-03-19得票数 0
回答已采纳
概述
我正在尝试使用Babel和Webpack来构建一个React应用程序。我知道我可以使用create-react-app，但我想了解一下这些技术是如何为自己工作的。
当我运行yarn run start或yarn run build (参见下面的package.json )时，Webpack报告说已经构建了这个包。当我在浏览器中运行应用程序时，我会得到Uncaught ReferenceError: React is not defined错误。
对于同样的错误，有很多问题要问，但是没有一个解决方案解决了我的问题。
问题
巴贝尔，Webpack，我错过了哪一首曲子才能配合得很好？
代码
p
浏览 7提问于2016-12-27得票数 4
回答已采纳
我用Webpack做了一个反应项目，似乎以一种我不明白的奇怪的方式影响了。
它似乎允许我浏览到index.html，无论该文件在代码库中的位置，这是不可能仅使用dev服务器的。
假设我有以下目录结构：
myproj/
|- package.json
|- webpack.config.js
|- src/
|- index.html
|- index.jsx
和一个类似于这样的webpack.config.js文件：
const path = require('path');
module.exports = {
entry: '.
浏览 0提问于2018-04-23得票数 7
回答已采纳
当我的index.html位于默认位置时(/resource/index.html/index.htm)。一切都很好。但是，当我试图更改默认位置时，它只会抛出404。即使在更改了application.properties之后。
项目结构
Application.properties
server.port = 5000
spring.thymeleaf.cache = false
spring.thymeleaf.prefix = classpath:/Frontend/public/
控制器
package iit.kent.cle;
import org.spring
浏览 0提问于2018-10-31得票数 0
回答已采纳
我正在思考我的反应/webpack，我已经建立了一个简单的反应my应用程序。在app.js里我得到了：
class Application extends React.Component {
render() {
console.log('testing ')
return <div>
<h1>Hello, ES6 w React 0.13!</h1>
</div>;
浏览 2提问于2017-02-08得票数 0
回答已采纳
使用Angular2，我启动了一个项目，但是当我打开
http://localhost:8080/webpack-dev-server/index.html
或
http://localhost:8080/index.html
它报告了404个没有找到的index.html。
我不知道为什么。
我在用Windows。。
浏览 0提问于2016-10-31得票数 0
回答已采纳
1回答
我们有多个角度项目，我们喜欢快速上传到s3进行质量保证和测试。我们把它们都上传到同一个桶里，在不同的子文件夹中。因此，s3桶结构如下：
-- tests-bucket
-- project1
-- index.html
-- project2
-- index.html
然后，我们有一个云前端分布和route53设置，例如tests.domain.com。
当通过完整路径访问项目时，一切正常工作：
tests.domain.com/project1/index.html
tests.domain.com/project2/index.html
但是
浏览 0提问于2018-06-09得票数 10
回答已采纳
1回答
我正在尝试使用webpack启动我的本地开发环境，但遇到了这个脚本部分的问题
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy /src/index.html /dist/index.html && webpack-dev-server --content-base src/ --inline",
"build:prod": "webpack -p &
浏览 3提问于2017-10-10得票数 0
我在我的系统上安装了cordova最新版本，我用命令创建了基本的应用程序。
cordova create
我添加了这个平台
cordova add platform android
我将www目录中的默认index.html替换为my index.html。
但是每当我试图生成apk，并试图在我的手机上运行它。是默认的index.html生成的apk。
我的应用程序的屏幕将是
如何解决这一问题？
浏览 1提问于2015-07-09得票数 1
回答已采纳
1回答
动态参数不能在量规中解析
、、、、
我尝试在量规规范中使用file特殊参数。
Export a customer
----------------------------------------
* Find customer "Hans"
* Export customer to <file:/customer.xml>
这方面的java实现如下所示
@Step("Export customer to <file>")
public void test(String file) {
System.out.println("file " + file)
浏览 0提问于2018-01-31得票数 1
回答已采纳
按照下面的编译错误，从我得到的页面一步一步地安装：
Compiling...
Compilation failed:
warning package.json: No license field
ModuleNotFoundError: Module not found: Error: Can't resolve '@angular/compiler' in '/home/semshekh/projects/tutorials/Webpacker5angular13/node_modules/@angular/platform-browser-dynamic/f
浏览 32提问于2021-11-08得票数 0
为了学习的目的，我想在Apache服务器上托管一个vue应用程序。为此，我希望Apache支持Vue路由器，也不希望通过URL访问源文件。
为了支持路由器，我在我的httpd.conf文件中添加了以下行：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
Rewrite
浏览 4提问于2022-01-12得票数 0
1回答
我从react-toolbox网站复制了基本的按钮实现，它似乎在react-toolbox主题中给出了一个错误。请查看错误的屏幕截图。
我的index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';
ReactDOM.render(
<Button label="Hello World!" />,
浏览 2提问于2017-03-09得票数 0
我在某处读到，我可以在任何子目录中的任何页面上添加href="./“，以将用户发送到根index.html文件，但是这似乎不起作用。正如标题所暗示的那样，当用户单击主页链接时，我尽量不让/index.html出现在网址中
浏览 2提问于2013-04-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
