webpack配置多入口，编译后页面加载空白解决

已于 2022-11-21 18:33:51 修改
阅读量672 收藏 1
点赞数 1
文章标签： webpack 前端 node.js
于 2022-11-21 18:25:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37331593/article/details/127969822
版权

webpack配置项目多入口，本地dev运行是正常的，但是build之后访问白屏，无法正常加载路由。

  • 本来的配置的 chunks
    在这里插入图片描述

  • 左思右想之后，感觉可能是chunks引入有遗漏，或者是插件版本的bug。后来抱着侥幸心理，用排除法 excludeChunks 试试看，居然成功了！
    在这里插入图片描述

  • 用到的 webpack 和 html-webpack-plugin 版本如下：

    "webpack": "^4.29.6",
    "html-webpack-plugin": "^3.2.0",

烧脑两小时，纪念一下！

_Jika_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack多页面多入口配置，js不执行的问题
m0_37337520的博客
09-04 1516
npm start之后，打开http://localhost:8080/aa.html,以及http://localhost:8080/another.html控制台什么都没有输出，如果将package.json里的npm start改成webpack，去dist里找到aa.html,打开，控制台就会有输出。 webpack配置文件 webpack.config.js const path = r...
webpack多入口文件页面打包配置详解
08-28
Webpack 多入口文件页面打包配置详解 Webpack 是一个功能强大且灵活的模块打包工具，能够帮助开发者轻松地构建和管理大型项目。然而，在实际项目中，我们经常会遇到多入口文件页面的打包配置问题。本文将详细介绍 ...
webpack5.0使用webpack-dev-server时，无法自动刷新网页html页面解决方案
chengzhijun93的博客
09-30 2773
有讲target:'web’的 有讲添加inline属性的（但是会显示如下错误） [webpack-cli] Error: Unknown option ‘–inline’ 其实主要还是webpack5.0改了~不支持inline，也不支持contentBase这些 解决方案：添加如下代码 折腾了一半天看了说明书才解决，如果有用的话麻烦点个赞~谢谢 如果如下方案无法解决请访问此超链接试试 官方文档关于watchFiles说明 devServer: { watchFiles: ['./src/index.h
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
最新发布
09-14 497
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到
xiao_yu_liu的博客
09-20 3579
webpack publicPath 文档 vue router base 属性 文档 1、webpack的原因 在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。 如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径， 但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径 这个时候。...
解决webpack打包后，直接打开index.html为空白页面的问题
weixin_44151377的博客
08-30 2689
解决webpack打包后，直接打开index.html为空白页面的问题 使用webpack打包后会生成dist文件，直接打开dist下的html为空白 1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下 2、解决方法：在配置production环境的文件中，将publicPath设置为"./" 3、再次npm run build进行打包，打开html就会显示相应内容 各位大佬，有更好的解决方法欢迎分享，谢谢~ ...
vue webpack打包后显示的网页是空白
pon的博客
04-01 3769
使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下： 但是将dist文件发布后，打开发现浏览器页面是空白的： 原因： 这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。 修改webpack打包文件中的配置： 1.在webpack.prod.conf.js中增加publicPath:’./’ ； 2.util.......
详解关于webpack多入口热加载很慢的原因
10-17
总结来说，面对 Webpack 多入口热加载慢的问题，我们可以采取以下策略： 1. **临时措施**：在开发过程中，只保留当前工作的 HTML 页面，其余暂时注释，减少 `HtmlWebpackPlugin` 的工作量。 2. **关注插件更新**：...
详解webpack4多入口、多页面项目构建案例
08-27
主要介绍了详解webpack4多入口、多页面项目构建案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解webpack 多入口配置
08-30
本篇文章主要介绍了webpack 多入口配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解webpack编译多页面vue项目的配置问题
08-28
本篇文章主要介绍了详解webpack编译多页面vue项目的配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
u012632105的博客
02-17 1070
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue 使用webpack打包，出现路径404 ，导致白屏&webpack-bundle-analyzer使用
zoepriselife316的博客
11-17 1120
webpack-bundle-analyzer
【记一次令人头疼的vue多页面分包问题】
suckshit的博客
02-21 1407
@vue/cli-service v4 webpack splitchunks.maxsize 会导致build出来的页面空白记一次令人头疼的问题！不知道是不是我的配置有问题。webpack相关配置使用*maxsize* build出来的文件展示可以看到上面没有*script*标签来引用*index~3364b0b4.08b2434b.js*文件将*maxsize*注释掉之后的build出来的html文件展示 记一次令人头疼的问题！不知道是不是我的配置有问题。 webpack相关配置 下面的splitchu
vue.config.js配置configureWebpack的optimization splitChunks页面空白
寬真
03-14 691
确实通过这种方式解决：原因可能是这个：
Vue技巧：通过webpack编译后的Vue项目打开为空白页的解决方案
竹映平昔
10-08 516
问题：通过webpack编译后的Vue项目打开为空白页的解决方案 解决方案： 打开通过Vue-cli建立的项目，然后进入config目录 找到index.js文件，然后找到 build: { } 在里面找到 assetsPublicPath 将其设置为： assetsPublicPath: './', 也就是在前面加个点啦！ ...
Webpack实现多页面打包
越陌度阡
01-09 1751
多页面应用(MPA)概念。单页面在开发时会把所有的业务放在一个大的入口里面去，不同的子业务还是同一个URL地址，只不过后面的hash会有所不同。多页面相对于单页面的区别在于，项目发布上线以后，有多个入口文件，每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页面网站，也叫多页应用。多页面有什么优势呢？主要有以下两点：1. 多个页面之间是解耦的，利于维护；2. 多页面对SEO更加友好；
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2191
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue项目使用vite打包后出现白屏并报错No match found for location with path
AzeShinja的博客
08-23 2800
createWebHistory导致的打包后页面空白
webpack配置多页面入口
07-13
在 webpack 配置中实现多页面入口可以使用 `entry` 属性来定义多个入口文件。下面是一个示例配置： ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: { page1: './...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值