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

原创 已于 2022-11-21 18:33:51 修改 · 860 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

于 2022-11-21 18:25:50 首次发布
本文介绍了一个关于Webpack配置多入口时遇到的问题：在本地可以正常运行，但打包后访问却出现白屏现象。通过调整chunks设置，并使用excludeChunks方法成功解决了此问题。

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

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

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

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

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

烧脑两小时，纪念一下！

_Jika_
关注
webpack实用配置dev--react（一）
小小•愿望的博客
05-05 631
一直以来都是使用脚手架创建应用，现在有空认真研究了一下webpack5，从零开始搭建项目，受益颇多，记下心得，以供参考。
使用webpack4构建一个基于vuejs的开发编译环境
挚友阳光的博客
05-09 325
使用webpack4构建一个基于vuejs的开发编译环境
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
09-14 802
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
vue webpack打包后显示的网页是空白
pon的博客
04-01 4020
使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下： 但是将dist文件发布后，打开发现浏览器页面是空白的： 原因： 这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。 修改webpack打包文件中的配置： 1.在webpack.prod.conf.js中增加publicPath:’./’ ； 2.util.......
vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到
xiao_yu_liu的博客
09-20 3817
webpack publicPath 文档 vue router base 属性 文档 1、webpack的原因 在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。 如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径， 但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径 这个时候。...
解决webpack打包后，直接打开index.html为空白页面的问题
weixin_44151377的博客
08-30 3234
解决webpack打包后，直接打开index.html为空白页面的问题 使用webpack打包后会生成dist文件，直接打开dist下的html为空白 1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下 2、解决方法：在配置production环境的文件中，将publicPath设置为"./" 3、再次npm run build进行打包，打开html就会显示相应内容 各位大佬，有更好的解决方法欢迎分享，谢谢~ ...
使用webpack打包vue项目,无法自动在浏览器中打开,情况总结
Moreisy的小镇
07-05 3418
最近用vue-cil快速构建vue项目的时候,发现他默认的是无法在浏览器的窗口中打开的,很不方便.当你运行 npm run dev 的时候窗口会显示I  Your application is running here: http://localhost:8080这段话的意思是：你的程序运行地址是:http://localhost:8080于是总结了一下浏览器默认打开的设置方法.其实归根结底就是一...
webpack生产环境配置：优化缓存与懒加载
2. **文件合并**：webpack允许通过entry配置来合并多个入口点，将它们打包成一个或多个文件。例如，`entry`对象中定义了多个入口，可以将公共库单独打包成一个`vendors.js`，以减少HTTP请求次数。 3. **懒加载（按...
webpack实用配置prod--react（二）
小小•愿望的博客
05-05 328
一直以来都是使用脚手架创建应用，现在有空认真研究了一下webpack5，从零开始搭建项目，受益颇多，记下心得，以供参考。
cson-loader：Webpack的CSON文件加载解决方案
从标题“cson-loader:用于Webpack的CSON加载器模块”可以看出，该工具的核心定位是一个 Webpack 生态中的 loader 模块，遵循 Webpack 的插件系统规范，通过将 CSON 文件编译为 JavaScript 对象，使得开发者能够像...
解决vue项目 webpack 打包以后服务器访问空白
最新发布
WCXY_的博客
06-11 620
因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。原理：利用window.history（history.pushState或history.replaceState） 相关api实现路由跳转，从而改变页面内容。由于通过history的api进行路由跳转，并不会向服务器发起请求，所以也达到了前端路由的目的。配置中添加配置，一般脚手架创建的项目都会有这个目录，没有的话需要自己创建。一般情况下打包后空白屏的问题造成原因是由静态资源路径错误引起的，可以在。
关于webpack执行npm run dev无法访问8080的问题（成功解决）
qq_42174584的博客
10-07 4057
刚开始在命令行中输入npm run dev想把项目跑起来，显示已经编译成功 但当打开浏览器发现 尝试网上说的方法一： 可能电脑不支持解析localhost改为127.0.0:8080-->结果发现不行 尝试方法二： 将防火墙关闭，重新使用命令行运行----->还是不行 尝试三：方法设置为自动打开浏览器（成功解决） 在config文件夹下的index.js,把autoOpenBrowser:flase,改为true，让它运行时自动打开浏览器 重新在命令行输入后成功打..
webpack多页面多入口配置，js不执行的问题
m0_37337520的博客
09-04 1706
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...
【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
u012632105的博客
02-17 1162
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue 使用webpack打包，出现路径404 ，导致白屏&webpack-bundle-analyzer使用
zoepriselife316的博客
11-17 1340
webpack-bundle-analyzer
【记一次令人头疼的vue多页面分包问题】
suckshit的博客
02-21 1699
@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 1004
确实通过这种方式解决：原因可能是这个：
Vue技巧：通过webpack编译后的Vue项目打开为空白页的解决方案
竹映平昔
10-08 596
问题：通过webpack编译后的Vue项目打开为空白页的解决方案 解决方案： 打开通过Vue-cli建立的项目，然后进入config目录 找到index.js文件，然后找到 build: { } 在里面找到 assetsPublicPath 将其设置为： assetsPublicPath: './', 也就是在前面加个点啦！ ...
Webpack实现多页面打包
分享前端工程化、动效魔法与性能之舞！
01-09 2113
多页面应用(MPA)概念。单页面在开发时会把所有的业务放在一个大的入口里面去，不同的子业务还是同一个URL地址，只不过后面的hash会有所不同。多页面相对于单页面的区别在于，项目发布上线以后，有多个入口文件，每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页面网站，也叫多页应用。多页面有什么优势呢？主要有以下两点：1. 多个页面之间是解耦的，利于维护；2. 多页面对SEO更加友好；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值