如何使用webpack修改index.html文件build文件夹中的路径？
要使用Webpack修改index.html文件build文件夹中的路径，可以通过以下步骤实现：
- 配置Webpack的HtmlWebpackPlugin插件：在Webpack配置文件中，使用HtmlWebpackPlugin插件来生成最终的index.html文件。安装HtmlWebpackPlugin插件，并在Webpack配置文件中引入和配置该插件。
- 设置输出路径：在Webpack配置文件中，通过配置output.path选项来设置Webpack打包后生成的文件输出路径。可以将output.path设置为build文件夹的路径。
- 使用publicPath选项：在Webpack配置文件中，通过配置output.publicPath选项来指定Webpack打包后生成的文件的访问路径。可以将output.publicPath设置为相对路径或者绝对路径，以确保index.html文件中引用的资源路径正确。
- 重新构建项目：运行Webpack构建命令，重新打包项目。Webpack会根据配置的输出路径和公共路径，将index.html文件和相关资源文件生成到build文件夹中，并更新index.html文件中的路径。
请注意，这里没有提及腾讯云的相关产品和产品介绍链接地址，如有需要，请自行查阅腾讯云的文档或官网。
相关·内容
3回答
我正在构建一个简单的应用程序，使用webpack来组合我的所有模块。我的webpack似乎在跑步(虽然，我已经和它的不工作作了斗争)。现在看起来像是找不到我的应用程序所必需的bundle.js。我得到了这个错误：
{ "versi
浏览 5提问于2017-07-08得票数 0
我刚刚使用create- react -app创建了一个react应用程序，该应用程序从端口3000开始，很好。我想访问带有前缀的应用程序，在我的例子中是/node，端口是80，即。localhost:3000/ retry=0</Location>
和部分工作，我可以访问，但页面不能正确加载，因为绑定的路由是静态的bundle
浏览 4提问于2017-08-08得票数 2
当我运行npm run build时，我得到了构建文件夹、index.html和其他文件。 <!中src路径是这样的。/static/js/main.eab12189.chunk.js"></script>
</html> 每当我执行npm run build时，我必须打开index.html并手动
浏览 67提问于2020-11-10得票数 1
也许8-9个月前，我用vue-cli创建了一个网络包装的Vue.js项目，并能够修改/build/webpack.dev.conf.js，让它在运行npm run build时将“编译”的index.html和JavaScript / CSS文件放在/build/webpack.dev.conf.js应用程序的正确文件夹中<
浏览 2提问于2018-02-18得票数 59
回答已采纳
我正在尝试为我的电子应用程序设置react。 我的主要目标是在不使用任何开发服务器的情况下在电子中使用原生的react。与电子应用程序一起使用Development server只会带来比以前更多的问题。 我将使用一个webpack来设置react，但不应该创建任何开发服务器。我只试过没有webpack的bable，但它的功能似乎较少。 另外，我必须如何<
浏览 12提问于2020-04-07得票数 0
文件夹中的i18n文件夹中的图像路径是正确的，但当我构建项目时，它会在项目的根目录下创建一个包含自己的资源文件夹的build文件夹。正如您在上面的文件结构中所看到的，build文件夹中的ltr html文件具有指向build</em
浏览 9提问于2020-04-08得票数 0
回答已采纳
使用本教程:输入npm run build后，我遇到了一个模糊的错误：。如果您看到我前面的问题，package.json只有很小的变化，我怀疑这与以下行(文件/目录名称中的空格)有关："build": "webpack -d && copy src/app/index.htmlbuild-prod": "
浏览 2提问于2017-05-24得票数 1
我将与browserHistory结合使用。这一职能： response.sendFile(path.join(__dirname + "/public/index.html"))应该发送的Index.html，因为路由发生在客户端与反应路由器。但是我的index.html被服务器误解了，我得到了这个错误：
未登录的</em
浏览 6提问于2016-11-03得票数 1
回答已采纳
我用的是webpack -dev-server^2.5.1运行的webpack 3，当我输入带有多个/的URL路径时，浏览器会在错误的目录中查找包含我所有资源的公共文件夹。它应该只在localhost:8080/style/style.css中查找。我如何确保总是以正确的路径搜索我的公共文件
浏览 8提问于2017-07-18得票数 1
由于我使用的是maven，所以所有生成的/构建的资源通常都写到target/文件夹中--我在.gitgnore上也有这个文件夹。我没有找到任何关于如何更改dist/文件夹<
浏览 1提问于2019-12-03得票数 1
我在测试我用WebPack开发的react网页时遇到了问题。看来网页能够找到我的index.html文件，这反过来又指向webpack创建的bundle.js文件，但出于某种原因，我相信我的bundle.js文件是空的？这是我第一次使用webpack，所以我对此还是比较陌生的。我将在下面发布我的目录结构、webpack<
浏览 1提问于2019-09-25得票数 2
回答已采纳
1回答
这是我第一次使用前端构建工具。在过去，我从未使用过比在我的html页面顶部添加一个<script>标记更复杂的框架类型。现在你知道我的知识水平了。我有一个vue.js/vuetify应用程序，目录结构如下所示：我认为它是从vuetify/webpack高级模板开始的。我试着把这个项目导出到我可以上网的东西上。我脑子里想的是，我可以运行某种类型的命令，将所有代码生成到.htm
浏览 4提问于2017-09-15得票数 0
回答已采纳
在我的index.html中，head标记中包含以下内容：但是，每当加载index.html时，这些资产只是再次加载为index.html，而不是它们的映像。Webpack不处理index.html</em
浏览 1提问于2018-08-13得票数 1
回答已采纳
from 'webpack';import webpackHotMiddlewarefrom 'webpack-hot-middleware';Error: ENOENT: no such file o
浏览 12提问于2020-02-19得票数 0
回答已采纳
当我们使用/static/js/main.b8ba68fa.js构建react应用程序时，创建的js/css的相对路径如下：/static/js/main.b8ba68fa.js等等。生成的index.html ...</head><head>
...</head&g
浏览 30提问于2022-11-21得票数 0
回答已采纳
在构建我的strapi应用程序(使用webpack)之后，我面临一个问题。
执行yarn build后，index.html使用<script>标记导入javascript文件。问题出现在这里，在我的构建文件夹中，有我所有的文件(图像、js文件等)和0子文件夹。但是在我的index.html中，它从
浏览 8提问于2022-08-10得票数 3
回答已采纳
我使用output.path和output.filename来指定Webpack应该在哪里输出结果，但是我不确定在output.publicPath中放入什么内容以及是否需要它。
浏览 121提问于2015-03-04得票数 285
后台：一个简单的一个页面反应应用程序+ redux +快递(为了上传到heroku)。
我已经在公用文件夹中有index.html和图像文件夹了。我想运行webpack来生成我在styles.css和bundle.js中使用的index.html。我想使用webpack清理插件删除额外的以前的文件，每次我运行构建，但我不希望这会影响像index.html<
浏览 0提问于2019-06-25得票数 2
回答已采纳
我正在建立一个新的网络应用程序使用react和它的样板。现在，我想在根目录中添加一个公用文件夹，其中包含index.html、robot.txt .htaccess文件和一些外部js库。请有人指导我编辑webpack配置文件，使其表现得像这样。
提前感谢
浏览 1提问于2019-05-06得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
