webpack服务端渲染踩坑记录

最新推荐文章于 2021-05-02 17:49:29 发布

_Captain_

最新推荐文章于 2021-05-02 17:49:29 发布

阅读量327

点赞数

分类专栏：前端 webpack Node.js 文章标签： webpack 服务端渲染疑难杂症踩坑

本文链接：https://blog.csdn.net/qq_39807732/article/details/98210940

版权

本文记录了在webpack服务端渲染过程中遇到的两个主要问题：1.由于style-loader依赖window对象导致`window is not defined`错误，解决方法是改用isomorphic-style-loader。2.配置不当会使输出文件过多，影响服务端执行，建议保持输出文件唯一。

摘要由CSDN通过智能技术生成

1.window is not defined

本来一直在用的是内联样式，但现在有个地方不得不用到了css选择器，目的是设置所有image的max-width为100%，然后看webpack文档使用了如下配置：

 module: {
   
   rules: [
     {
   
       test: /\.css$/,
       use: [
            {
   
                loader: 'style-loader'
            },

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_Captain_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue SSR服务端渲染改造踩坑指南

chen801090的博客

05-07

8637

版本匹配 Vue的SSR渲染，可以当作一个全新的项目，需要安装依赖的模块(node_modules)，可以将原先使用vue cli 3创建的项目的package.json拷贝过来，确保不缺少相关模块，然后在此基础上添加SSR需要的模块。主要是vue-server-renderer: npm install vue vue-server-renderer --save vue-serv...

react+Koa服务端渲染系列——基于Gitlab和Docker部署篇

qq_41108402的博客

06-14

492

前言从三月面试开始拉开巨幕，到五月份结束，终于拿到欢聚时代的offer。于是，在离职期间，我开始研究了服务端渲染，从技术选型，搭建框架到实现自动化部署，踩了不少的坑，终于完成了初步框架搭建和自动化部署这两步。由于自动化部署是最后完成的，所以印象深刻。现在趁热打铁，先把自动化部署的研发的整个过程记录在案，以方便之后自己或者各位看客能够看到我踩过的坑！本次自动化部署是基于gitlab+docker进行自动化部署的。下面请看我娓娓道来~ 一、gitlab和.gitlab-ci.yml 众所周知，g

参与评论您还未登录，请先登录后发表或查看评论

Angular 服务器端渲染中的坑

u011256637的专栏

05-28

3176

Angular 官方文档已经有 Angular Universal 那一章，专门用于讲解服务器端渲染。但是在使用服务器渲染的时候还是碰到不少的坑。1. 文档中的坑文档中已经大致介绍了服务器渲染的过程，以及需要的配置，但文档中还是有不少的问题。

webpack实现ssr服务端渲染

qq_41402809的博客

04-18

386

正常情况下CSR 直接在客户端用render渲染出来即可。可以看出，所有的渲染逻辑都是由打包出来的js文件完成，页面的整体框架是没有内容的，所以才说不以利SEO。（页面都没有东西啊，搜索引擎咋知道你页面是干嘛的） SSR逻辑将组组件输出成字符串将字符串输出到模板里面 服务端返回模板项目结构 SSR代码实现创建一个server端，写入配置 /server/index.js if(typeof window === 'undefined'){ global.window = {} }

webpack配置之后端渲染详解

08-29

本篇文章主要介绍了webpack配置之后端渲染详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

【036】html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法

zhangchao19890805的专栏

08-12

1万+

一、问题描述下面是在命令行给出的错误提示：[10:16:36] Starting 'webpack'... Unhandled rejection Error in plugin 'webpack-stream' Message: ReferenceError: window is not defined - index.html:50 Object.<anonymous> D

Vue ssr踩坑

笙箫默

05-31

7465

自从大四以后就再也不知道写博客为何物了，偶尔也是在github上记录下，今天又重新回归csdn，连账号密码都忘了，搞了半天的密码找回，捂脸23333 最近在给自己做的项目加vue 服务端渲染，以前公司有一套模板的，直接拿过来后发现一堆报错，有因为webpack，vue版本升级的报错，也有新增的一些业务造成的错误，大概可能搞了一周，哎，搞死人了搞死人了，所以就想写博客来记录下了...

webpack项目 vue-pdf引入报错 window is not defined

zcylyzhi4的博客

10-12

1401

webpack项目 vue-pdf引入控制台保存 window is not defined解决方案 webpack.config.js中，output添加如下一行代码： module.exports = { .... output: { globalObject: "this" } .... } 重启项目，刷新浏览器即可

【webpack】style-loader错误

novenn

08-22

3655

使用webpack，style-loader出现的错误：ERROR in {project}/node_modules/style-loader/lib/addStyles.js Module not found: Error: Can't resolve './urls' in '{project}\node_modules\style-loader\lib'解决方法：直接修改{project

配置Vue服务器端渲染SSR(一)

大灰狼的小绵羊哥哥的博客

11-08

3044

阅读前为什么使用服务器渲染?

利用webpack打包自己的第一个Vue组件库

weixin_30695195的博客

05-29

666

　　先说一下这篇文章的诞生原因。我们有一个这样的项目，类似或者说就是一个仪表板-Dashboard，其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局（大小和位置）和展示的能力。要实现这样一个功能，想了好几种方式实现（后面的笔记详说），最后选择了这篇笔记的实现方式：写整个项目的，算是使用方；写每个组件的，算是vue类库（UI、组件库）的提供方。之后就是我们如何使用这些类库的问题了，就像我们...

在webpack打包时，出现ReferenceError: document is not defined

qq_45425616的博客

05-02

2934

ERROR in Template execution failed: ReferenceError: document is not defined 错误信息会出现这样的原因主要是因为在index.html中多加了 <script src="js/carousel.js"></script>这一行代码，把它删除问题就解决了我的目录结构： **注意：要把引用js的这一行代码删除，只是单单的注释可能还会出现类似的错误** 出现这样的问题是出在plugin组件中使用 htm

全局对象（global object）

u011342216的博客

09-05

4518

全局对象（global object）在javascirpt中有着重要的用途：全局对象的属性是全局定义的符号，javasciprt程序可以直接使用。当javascirpt解释器启动的时候（或者任何web浏览器加载页面的时候），它将创建一个新的全局对象，并给它一组定义的初始属性。 ---- 全局属性，比如undefined，infinity，和NaN ---- 全局函数，比如is

vue服务端渲染ssr 报错 window is not definded解决

热门推荐

gaoqiang1112的博客

06-13

1万+

多数是因为服务端渲染页面是又后台路径跳转过来的此时页面还没有渲染出来所以window对象还没有诞生但是你的用的各种第三方js文件有很多都使用了window 所以我们通过vue的生命周期函数去判断window对象其实此时加不加载并不影响添加判断即可 // 引入需要window的外置js if (typeof window !== 'undefined') {...

关于cli打包至服务器出现的BUG(样式错乱，路径出错)解决方案

weixin_30375427的博客

08-14

244

很久没来博客园了，今天给大家带来两个硬货bug，前端大牛可能不觉得是啥，但是对于没碰到过这问题的小菜鸟我来说还是很不错的 1、npm run build 至服务端的时候出现路径报错解决方案 ①、本地测试无任何问题打包上线，全报错，出bug 解决思路：在src文件夹同级目录下创建vue.config.js文件里面在vue.config.js中重写打包后的基础路径为当前目录 ...

精读前后端渲染之争

game3108的专栏

04-17

1608

很不错的一篇关于前端和后端渲染的文章，这里记录一下英文原文连接：https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52 原文连接：https://zhuanlan.zhihu.com/p/26366128 本期精读的文章是：Here's why Client

isomorphic-style-loader在前后端渲染样式同构中的应用与源码分析

广兰路地铁的博客

04-04

1796

前言在笔者的上一篇文章(基于react的前后端渲染实例讲解)中，对react下前后端渲染的流程进行了一个介绍。对前后端渲染的相关概念和原理不太了解的可以移步那篇文章。同时留下了一个引子：如何优雅地实现前后端渲染的样式同构。由此我们引出了公共库isomorphic-style-loader,在这篇文章中，笔者将结合实例介绍该库在项目中的应用以及对其原理进行分析。项目实战这里我们以上一篇文章中的...

我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR）&& HMR

weixin_34358092的博客

05-03

248

技术栈：webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌！可能是因为我很懒,导致...,然后，好吧，我比较懒，没有然后了。。。切入正题ing，let's do it！！！) 网上关于React的SSR也很多，但都不够详细，有的甚至让初学者一头雾水。不过这篇文章我将一步步详细的介绍，从0开始配置React S...

webpack4 css样式抽离且支持热重载extract-css-chunks-webpack-plugin 服务端渲染

蜗牛速度额的博客

04-13

3908

HMR：它还拥有对所有这些css文件/块的热模块替换的一流支持！可缓存的样式表与“render-path”css-in-js解决方案相比发送的最小总字节数，包括JS中的CSS定义比V2快！异步加载没有重复的编译（性能）更容易使用特定于CSS SSR友好的开发构建，专注于前端DX 与Universal系列无缝协作作为一个独立的样式加载器非常有用（你可以将它用于任何...

webpack服务端渲染