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

已于 2022-11-21 18:33:51 修改
阅读量734 收藏 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_
关注
webpack多页面多入口配置，js不执行的问题
m0_37337520的博客
09-04 1590
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...
使用webpack4构建一个基于vuejs的开发编译环境
挚友阳光的博客
05-09 272
使用webpack4构建一个基于vuejs的开发编译环境
vue webpack打包后显示的网页是空白
pon的博客
04-01 3873
使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下： 但是将dist文件发布后，打开发现浏览器页面是空白的： 原因： 这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。 修改webpack打包文件中的配置： 1.在webpack.prod.conf.js中增加publicPath:’./’ ； 2.util.......
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
最新发布
09-14 575
Vue多入口：HtmlWebpackPlugin一使用Chunks就出现空白页，而且不加载任何文件；不使用Chunks则只能跳到一个页面。
vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到
xiao_yu_liu的博客
09-20 3690
webpack publicPath 文档 vue router base 属性 文档 1、webpack的原因 在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。 如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径， 但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径 这个时候。...
解决webpack打包后，直接打开index.html为空白页面的问题
weixin_44151377的博客
08-30 2934
解决webpack打包后，直接打开index.html为空白页面的问题 使用webpack打包后会生成dist文件，直接打开dist下的html为空白 1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下 2、解决方法：在配置production环境的文件中，将publicPath设置为"./" 3、再次npm run build进行打包，打开html就会显示相应内容 各位大佬，有更好的解决方法欢迎分享，谢谢~ ...
webpack生产环境配置：优化缓存与懒加载
2. **文件合并**：webpack允许通过entry配置来合并多个入口点，将它们打包成一个或多个文件。例如，`entry`对象中定义了多个入口，可以将公共库单独打包成一个`vendors.js`，以减少HTTP请求次数。 3. **懒加载（按...
webpack多页面配置，多入口
HZ___ZH的博客
08-30 132
原理 将每个页面所在的文件夹都看作是一个单独的单页面程序目录，配置多个entry以及html-webpack-plugin即可实现多页面打包。 使用Webpack构建多页面程序的实现步骤 webpack多页面打包配置 使用Webpack构建多页面程序 ...
vue-cli中的webpack配置
心暖未晴
10-24 820
https://segmentfault.com/a/1190000008779053 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├──
webpack配置多入口
longtengg1的博客
07-14 1322
有些项目中，一个项目中要产出多个页面，这时怎么打包？ 1、entry入口中要建多个入口文件 使用path前先引入path const path = require(‘path’) entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, 2、修改output output放在webpack.prod.js中； 为了使多个filename不重名，使用
使用webpack打包vue项目,无法自动在浏览器中打开,情况总结
Moreisy的小镇
07-05 3353
最近用vue-cil快速构建vue项目的时候,发现他默认的是无法在浏览器的窗口中打开的,很不方便.当你运行 npm run dev 的时候窗口会显示I  Your application is running here: http://localhost:8080这段话的意思是：你的程序运行地址是:http://localhost:8080于是总结了一下浏览器默认打开的设置方法.其实归根结底就是一...
关于webpack执行npm run dev无法访问8080的问题（成功解决）
qq_42174584的博客
10-07 3861
刚开始在命令行中输入npm run dev想把项目跑起来，显示已经编译成功 但当打开浏览器发现 尝试网上说的方法一： 可能电脑不支持解析localhost改为127.0.0:8080-->结果发现不行 尝试方法二： 将防火墙关闭，重新使用命令行运行----->还是不行 尝试三：方法设置为自动打开浏览器（成功解决） 在config文件夹下的index.js,把autoOpenBrowser:flase,改为true，让它运行时自动打开浏览器 重新在命令行输入后成功打..
【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
u012632105的博客
02-17 1097
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue 使用webpack打包，出现路径404 ，导致白屏&webpack-bundle-analyzer使用
zoepriselife316的博客
11-17 1193
webpack-bundle-analyzer
【记一次令人头疼的vue多页面分包问题】
suckshit的博客
02-21 1523
@vue/cli-service v4 webpack splitchunks.maxsize 会导致build出来的页面空白记一次令人头疼的问题！不知道是不是我的配置有问题。webpack相关配置使用*maxsize* build出来的文件展示可以看到上面没有*script*标签来引用*index~3364b0b4.08b2434b.js*文件将*maxsize*注释掉之后的build出来的html文件展示 记一次令人头疼的问题！不知道是不是我的配置有问题。 webpack相关配置 下面的splitchu
webpack使用流程和配置
husai20的博客
11-27 1481
Webpack基本使用流程 Webpack配置文件 Webpack插件与加载器使用 webpack服务器开发
vue.config.js配置configureWebpack的optimization splitChunks页面空白
寬真
03-14 805
确实通过这种方式解决：原因可能是这个：
Vue技巧：通过webpack编译后的Vue项目打开为空白页的解决方案
竹映平昔
10-08 555
问题：通过webpack编译后的Vue项目打开为空白页的解决方案 解决方案： 打开通过Vue-cli建立的项目，然后进入config目录 找到index.js文件，然后找到 build: { } 在里面找到 assetsPublicPath 将其设置为： assetsPublicPath: './', 也就是在前面加个点啦！ ...
Webpack实现多页面打包
越陌度阡
01-09 1834
多页面应用(MPA)概念。单页面在开发时会把所有的业务放在一个大的入口里面去，不同的子业务还是同一个URL地址，只不过后面的hash会有所不同。多页面相对于单页面的区别在于，项目发布上线以后，有多个入口文件，每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页面网站，也叫多页应用。多页面有什么优势呢？主要有以下两点：1. 多个页面之间是解耦的，利于维护；2. 多页面对SEO更加友好；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值