开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Webpack配置未在公用文件夹中生成index.html

Webpack是一个现代化的静态模块打包工具，它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个静态资源文件，以便在浏览器中加载。Webpack的配置文件通常是一个JavaScript文件，用于指定打包的入口文件、输出文件的路径、加载器和插件等。

对于Webpack配置未在公用文件夹中生成index.html的问题，可能是由于配置文件中的输出路径或模板文件路径设置不正确导致的。以下是解决该问题的一些步骤和建议：

确保Webpack配置文件中的输出路径设置正确。在配置文件中，可以使用output字段指定输出文件的路径和名称。例如，可以将输出路径设置为公用文件夹中的路径，如path: path.resolve(__dirname, 'public')。
确保Webpack配置文件中的模板文件路径设置正确。如果需要生成index.html文件，可以使用html-webpack-plugin插件来自动生成HTML文件，并将打包后的资源文件自动引入到HTML中。在配置文件中，可以使用该插件的template选项指定模板文件的路径。例如，可以将模板文件路径设置为公用文件夹中的路径，如template: path.resolve(__dirname, 'public/index.html')。
确保Webpack配置文件中的入口文件设置正确。入口文件是Webpack打包的起点，可以使用entry字段指定入口文件的路径。如果入口文件设置不正确，可能导致生成的index.html文件无法正确引入打包后的资源文件。
检查Webpack配置文件中的加载器和插件是否正确配置。加载器和插件可以用于处理各种资源文件，如JavaScript文件、CSS文件、图片等。如果加载器或插件配置不正确，可能导致生成的index.html文件无法正确引入相关资源文件。

综上所述，解决Webpack配置未在公用文件夹中生成index.html的问题，需要确保输出路径、模板文件路径、入口文件以及加载器和插件的配置正确。如果仍然存在问题，可以进一步检查Webpack的版本和相关依赖库的版本是否兼容，并查看Webpack的日志或错误信息以获取更多的调试信息。

腾讯云相关产品和产品介绍链接地址：

腾讯云Webpack文档：https://cloud.tencent.com/document/product/1214
云服务器CVM：https://cloud.tencent.com/product/cvm
云存储COS：https://cloud.tencent.com/product/cos
云数据库CDB：https://cloud.tencent.com/product/cdb
人工智能AI：https://cloud.tencent.com/product/ai
云原生Kubernetes：https://cloud.tencent.com/product/tke
云安全SSL证书：https://cloud.tencent.com/product/ssl

相关搜索:Webpack 4在不同层次的文件夹结构中为img标签生成错误的src路径 Webpack未将图像添加到公用文件夹中如何使用Symfony Webpack Encore将生成的资产拆分到单独的文件夹中如何使用webpack修改index.html文件build文件夹中的路径？如何配置我的React项目以从公用文件夹html文件中删除.html扩展名？如果index.html不直接位于输出根中，如何为webpack-dev-server配置各种路径选项？无法将公用文件夹中的index.html与源文件夹中的index.js连接生成运行器未在项目文件夹中运行由webpack创建的index.html包括vendor.js和app.bundle.js，它们位于相同的dist文件夹中除公用文件夹中的index.html外，VueJS iframe不加载任何其他html文件

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Webpack 实战入门系列（三）：生产配置、样式文件分离及输出清理

这没问题，但是也可以将公用部分抽出来，在各个环境中引用公用部分，这样管理起来更方便。...这里就要提到一个工具：webpack-merge，可以专门用来合并webpack配置，可以通过npm安装；安装 npm install --save-dev webpack-merge 抽离公用配置...总结下，就是将公用部分抽出来独立，像loader及插件这种经常会添加修改的就单独放，后期只修改common.js，应用到开发、生产环境，就在对应的配置文件中merge这个工具合并就是一个完整配置了。...，而且这个插件是要在生产环境，也就是构建的时候发挥作用，所以先将之前在公用配置文件webpack.common.js中的样式相关loader删掉并移植到webpack.dev.js文件中，最后在webpack.prod.js...我们可以看到在dist文件夹里，有一些历史文件index.html，这是我在webpack.common.js文件里修改了东西，输出文件变了，但是之前的文件仍然会存在，这样日积月累就会有很多垃圾。

7772 0

【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用

不同页面可以根据不同的 html 打包有些 js 需要直接在 html 模板中引入，打包直接生成在 html 中，但是有些页面不需要引入其他的 js，比如一些纯静态页面。...多页：最终打包生成多个入口（ html 页面），一般每个入口文件除了要引入公共的静态文件（ js/css ）还要另外引入页面特有的静态资源单页：只有一个入口( index.html )，页面中需要引入打包后的所有静态文件...加到入口的配置中。...index.html，如果有会根据这个模板进行build let pageHtml = `src/pages/${item.page}/index.html`; // 如果文件夹下没有制定的模板，...这个时候我们可以使用两种方式：使用vue-router控制路由这个我觉得不用多说了吧，在需要使用路由的文件夹下创建一个router.js，并且引入vue-router，一定要在某个文件夹下创建哦，否则几个页面公用一个

1K1 0

手把手教你搭建基于 webpack4 的 vue2 多页应用

多页：最终打包生成多个入口（ html 页面），一般每个入口文件除了要引入公共的静态文件（ js/css ）还要另外引入页面特有的静态资源单页：只有一个入口( index.html )，页面中需要引入打包后的所有静态文件...加到入口的配置中。...index.html，如果有会根据这个模板进行build let pageHtml = `src/pages/${item.page}/index.html`; // 如果文件夹下没有制定的模板...}/index.html`; // 如果文件夹下没有制定的模板，则采用默认的模板 build if(!...这个时候我们可以使用两种方式：使用vue-router控制路由这个我觉得不用多说了吧，在需要使用路由的文件夹下创建一个router.js，并且引入vue-router，一定要在某个文件夹下创建哦，否则几个页面公用一个

1K1 0

Angular10配置webpack打包「详细教程」

除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。...端到端测试文件（基本用不到）根级的 e2e/ 文件夹中包含一组针对根应用的端到端测试的源文件，以及测试专属的配置文件。...三、使用webpack把第三方库模块分离 - optimization + splitChunks 在 webpack4.x 中，我们使用 optimization.splitChunks 来分离公用的代码块...它表示分离后生成新代码文件名称的链接符，比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库，那么，最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的...需要注意的是，默认angular-cli打包生成的入口文件也被配置成了index.html，所以我们需要更改angular.jaon文件中的配置。

4.9K2 0

React多页面应用5(webpack4 多页面自动化生成多入口文件)

7、React多页面应用7(webpack4 生产环境配置)---2018.04.13 8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16...在之前课程中,我们发现,有很多重复劳动如: 我们需要手动新建webpack入口文件再 entryBuild 文件夹中新建,每个页面的js文件 index.js ?...然后还需要在 devbuild 文件夹中建立两个对应的 html文件 index.html ? shop.html ? 这两个文件几乎也是一样的 ? 顺便还有一个问题就是 title 如何设置?...5.接下来我们自动化生成 html文件我们需要建立一个模版比如叫 index.html 放在根目录下 <!...6.建立几个公用webpack js文件 webpack.com.conf.js let titleFun = function(chunkName,title){ let titleDef =

2.7K3 0

webpack入门指南

/assets/main.bundle.js"> 在basic文件夹执行webpack，打包信息如下 ?.../app2.js' } 在multi-entry文件夹执行webpack，打包信息如下 ?...考虑到 Web 上有很多的公用 CDN 服务，那么怎么将 Webpack 和公用的 CDN 结合使用呢？方法是使用 externals 声明一个外部依赖。.../app.css'); // 新增hello.js，显然在文件夹中是不会存在hello.js文件的，这里会报错 require('....然后我们在配置文件中添加vendor，以及运用代码分离的插件对生成的vendor块重新命名 var webpack = require("webpack"); module.exports = {

2.3K4 0

React多页面应用4(webpack自动化生成多入口页面)

5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01 6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等...然后还需要在 build 文件夹中建立两个对应的 html文件 index.html ? shop.html ? 这两个文件几乎也是一样的 ? 顺便还有一个问题就是 title 如何设置?...2.接下来我们要实现自动化生成 , webpack 的入口文件js,和html文件在这之前我们需要写几个公共方法!...6.建立几个公用webpack js文件 webpack.com.conf.js let titleFun = function(chunkName,title){ let titleDef =...我们删除根目录下的 build 文件夹,然后执行 npm run devBuildHtml 看下是否自动生成了 build 文件夹 和 index.html shop.html 文件 ?

1.8K5 0

在SPA模式网页版本检测方案

---- 方案来源于团队分享后的总结实现,文中代码并未在实际产品中是使用,仅供参考。...背景由于在spa模式的应用中页面的内容变化不再引起整个页面的重新加载,故需要解决在spa模式的应用中网页在使用的过程中服务器已更新的资源不能被及时的获取的问题。...解决思路标记版本: 在vue.config.js中每次编译生成一个版本号使用html-webpack-plugin插件将版本号插入到index.html的mate标签在webpack编译结束生成附带版本号的...html-webpack-plugin为index.html插入编译版本号 const HtmlWebpackPlugin = require("html-webpack-plugin"); const...编译完成,正在生成版本文件！")

5192 0

node服务端渲染(完整demo)

如导航/底部/html模板等 /**views目录下增加两个文件夹_layout(公用模板) _component(公共组件) 目录结构如下 │─.gitignore │─package.json....gitignore │ package.json │ README.md ├─bin │ www.js ├─config //增加webpack配置目录 │ webpack.config.js.../images/ww.jpg); // 背景图片 margin: 10px 0; } /* webpack配置 webpack.config.js */ const path =...--config config/webpack.config.js" } 运行 npm run build 后生成 dist views/_layout 两个目录 {% extends "..

2.2K1 0

【Hybrid开发高级系列】WebPack模块化专题

; 3、书写index.html文件 4、执行命令，生成bundle.js文件$ webpack ....[ext]' 　　　　} 　　] } 上例中的name字段指定了在打包根目录(output.path)下生成名为images的文件夹，并在原图片名前加上8位hash值。 .../images/bg.jpg); 通过之前的配置，使用$ webpack命令对代码进行打包后生成如下目录打包目录中，css文件和images文件夹保持了同样的层级，可以不做任务修改即能访问到图片...2.7.3 JS中的图片初用webpack进行项目开发的同学会发现：在js或者react中引用的图片都没有打包进bundle文件夹中。 .../index.html'; 这样html文件中的图片就可以被打包进bundle文件夹里了。

3365 0

使用vue-cli搭建spa项目

这个文件夹主要是进行webpack的一些配置 webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖 webpack.dev.conf.js webpack开发环境配置...webpack.prod.conf.js webpack生产环境配置 build.js 生产环境构建脚本 vue-loader.conf.js 此文件是处理.vue文件的配置文件 config文件夹...时根据package.json配置生成的npm安装包的文件夹 src文件夹源码目录(开发中用得最多的文件夹) assets 共用的样式、图片 components 业务代码存放的地方，里面分成一个个组件存放...里的入口配置 static文件夹存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置，对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用.../dist/index.html'), 配置中的index.html就是项目根目录下的index.html文件。

7191 0

webpack4学习+配置实现简单的多页面jq开发脚手架

一些升级到 webpack4 的 tips: extract-text-webpack-plugin 必须 4+版本才可以在 webpack4 中用 webpack4 中必须提供 mode 参数，process.env.NODE_ENV...再.babelrc 中配置。...在 webpack4 的文档中，官方也推荐我们使用 mini-css-extract-plugin 代替 extract-text-webpack-plugin，并且该 plugin 配合 css-hot-loader...html 模板和配置 webpack 的入口文件这样就不需要手动去设置 entry 和 Pugin 中手动生成 html 了我们约定了目录结构如下 src\ index\ index 页面 -.../webpack.xxx.js webpack.base.config.js 公用配置 webpack.dev.config.js 开发环境配置 webpack.prod.config.js 生产环境配置

9481 0

手摸手 Webpack 多入口配置实践

首先我们简单介绍一下 Webpack 的相关配置项，这些配置项根据使用的 Webpack 模版不同，一般存放在 webpack.config.js 或 webpack.base.conf.js 中： const...，就到这个文件夹中处理。.../entries') // 多入口配置，这个函数从 entries 文件夹中读取入口文件，装配成webpack.entry配置 exports.entries = function() { const...； exports.htmlPlugin 函数和之前函数的原理类似，不过组装的是 HtmlWebpackPlugin 插件的配置，生成这样一个数组，可以看到和我们手动设置的配置基本一样，只不过现在是根据文件夹结构来生成的...] 有了这两个根据 entries 文件夹的结构来自动生成 webpack 配置的函数，下面来改一下 webpack 相关的几个配置文件： // build/webpack.base.conf.js

7762 0

webpack基本打包配置流程

项目搭建以及webpack打包配置流程创建文件夹EC（文件夹和文件名根据需求自定义）在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html...文件在APP文件夹下新建两个js文件：a,js b.js （当项目级别如react项目，可以根据需求创建components文件夹等等，用于更好地管理模块化项目） APP/index.html...} } 7.在EC目录下打开控制台，输入 npm run dev image.png 此时项目EC文件夹下会自动生成dist文件夹并将webpack.config.js文件中定义的入口文件输出到该...dist文件夹并命名为webpack.config.js中定义的输出文件名将APP/index.html copy 一份到 dist 文件夹，用来运行该dist文件夹下由webpack打包生成的main.js...（或者其他自定义的）此时在浏览器中打开dist文件夹下的index.html 控制台如下： image.png 最终文件夹如下： image.png

8469 0

一文搞懂 Webpack 多入口配置

首先我们简单介绍一下 Webpack 的相关配置项，这些配置项根据使用的 Webpack 模版不同，一般存放在 webpack.config.js 或 webpack.base.conf.js 中： const...，就到这个文件夹中处理。.../entries') // 多入口配置，这个函数从 entries 文件夹中读取入口文件，装配成webpack.entry配置 exports.entries = function() { const...； exports.htmlPlugin 函数和之前函数的原理类似，不过组装的是 HtmlWebpackPlugin 插件的配置，生成这样一个数组，可以看到和我们手动设置的配置基本一样，只不过现在是根据文件夹结构来生成的...] 有了这两个根据 entries 文件夹的结构来自动生成 webpack 配置的函数，下面来改一下 webpack 相关的几个配置文件： // build/webpack.base.conf.js

2.8K4 0

一文搞懂 Webpack 多入口配置

首先我们简单介绍一下 Webpack 的相关配置项，这些配置项根据使用的 Webpack 模版不同，一般存放在 webpack.config.js 或 webpack.base.conf.js 中： const...，就到这个文件夹中处理。.../entries') // 多入口配置，这个函数从 entries 文件夹中读取入口文件，装配成webpack.entry配置 exports.entries = function() { const...； exports.htmlPlugin 函数和之前函数的原理类似，不过组装的是 HtmlWebpackPlugin 插件的配置，生成这样一个数组，可以看到和我们手动设置的配置基本一样，只不过现在是根据文件夹结构来生成的...] 有了这两个根据 entries 文件夹的结构来自动生成 webpack 配置的函数，下面来改一下 webpack 相关的几个配置文件： // build/webpack.base.conf.js

6402 0

vue06安装vue-cli+使用vue-cli搭建项目+什么是*.vue文件+开发示例+必问面试知识点

这个文件夹主要是进行webpack的一些配置 webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖 webpack.dev.conf.js webpack开发环境配置...webpack.prod.conf.js webpack生产环境配置 build.js 生产环境构建脚本 vue-loader.conf.js 此文件是处理.vue文件的配置文件 config文件夹...时根据package.json配置生成的npm安装包的文件夹 src文件夹源码目录(开发中用得最多的文件夹) assets 共用的样式、图片 components 业务代码存放的地方，里面分成一个个组件存放...里的入口配置 static文件夹存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置，对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用.../dist/index.html'), 配置中的index.html就是项目根目录下的index.html文件。

7291 0

React多页面应用4(webpack4 提取第三方包及公共组件)

5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11 6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12...7、React多页面应用7(webpack4 生产环境配置)---2018.04.13 8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16...1、公用代码做成公共组件我们先来分析下什么算是公用代码？ ? 红色部分是不一样的！其余部分重复了，我们可以做成公用组件！...require('webpack-merge');//webpack配置文件合并 const path = require("path"); const baseWebpackConfig = require.../webpack.base.conf");//基础配置 const webpackFile = require(".

1.9K5 0

深入了解Webpack

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...我们不想为每个Webpack构建都手动重新创建此文件。为了自动生成 dist / index.html 文件，我们可以使用Webpack插件。.../src/index.html'), }) ], ... }; 然后，在您的源代码文件夹中创建一个新的 src / index.html 模板文件，并为其提供以下内容： <!...现在，npm run build再次运行，查看新的自动生成的 dist / index.html是否与 src / index.html 中的模板匹配。...该文件位于新的 build-utils 文件夹中。为了稍后在Webpack配置中区分正在运行的脚本，我们还向配置传递了一个环境标志（dev，prod）。

6.8K7 5

Webpack 详解

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。...我们不想为每个Webpack构建都手动重新创建此文件。为了自动生成 dist / index.html 文件，我们可以使用Webpack插件。.../src/index.html'), }) ], ... }; 然后，在您的源代码文件夹中创建一个新的 src / index.html 模板文件，并为其提供以下内容： <!...现在，npm run build再次运行，查看新的自动生成的 dist / index.html是否与 src / index.html 中的模板匹配。...该文件位于新的 build-utils 文件夹中。为了稍后在Webpack配置中区分正在运行的脚本，我们还向配置传递了一个环境标志（dev，prod）。

6.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭