sideeffects没配置css也还在,webpack4踩坑配置之sideEffects, 打包文件中没有css文件

最开始先来讲一下sideEffects

sideEffects

sideEffects意为副作用，无副作用类似纯函数的概念(接受参数并返回值，不产生其他影响)

这里的副作用针对模块，如果一个模块单纯的导入导出变量那就是无副作用的，如果还修改其他模块或者全局的一些东西就是有副作用的。

比如以下都是有副作用的：

导入一个任何一个模块中, 当使用webpack中的 tree shaking 时，需要在package.json中增加sideEffects配置, 它会帮你自动删除一些没有引用的模块, 具体参考tree shaking

"sideEffects": false

复制代码

或者配置个数组，表示不进行删减的文件，尤其是css, 后续会讲到这个坑

"sideEffects": [

"./src/file.js",

"*.css",

"*.vue",

"./static/sdk/*.js",

"./static/*/*.js" // 注意这种写法，多层文件夹必须对应多个 /, 而不能直接写成 ./static/*.js

]

复制代码

讲完什么是sideEffects后,来讲一下遇到的问题

项目从webpack3.0 升级到 webpack4.0, 由于项目比较复杂,

涉及了vue多页面前端渲染以及vue ssr, 加上后端配置ts的node,

真的是是蛮难升级的, 中间遇到各种各样的问题, 由于升级了webpack4,

如果不进行配置, 会发现所有的共用包都会打到一起,

导致服务端渲染的js文件体积急剧增大,

后续发文再讲这个事情

这次遇到的问题是打包生成不了css文件, 导致打包后的项目没样式加载,

现在来讲一下webpack配置sideEffect一个影响,笔者也是踩了不少坑

sideEffects: false

复制代码

下面是sideEffects配置成false的情况

下面是sideEffects配置成[]的情况

sideEffects: [

"*.vue",

"*.css"

]

复制代码

因为这个问题笔者mini-css-extract-plugin上各种纠结, 找了好久, 突然灵机一动, 想到了这个参数, 改了一下, 就好了

css返回文件类型问题, 自己配置前端webpack的时候很容易遇到

另外还遇到一个

Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream:

“http://192.168.61.132:8083/index.css”

dev的时候css文件请求了, 但是没有渲染, 查了一下修改一下node的返回文件类型就好了

if (isDev) {

// 解决热加载中 css被转成application/octet-stream 的问题

app.use(async (ctx, next) => {

await next()

if (/\.css$/.test(ctx.path)) {

ctx.type = 'text/css; charset=utf-8'

}

// 'Content-Type: text/css; charset=utf-8'

});

}

复制代码

加上这个webpack终于从3升级到了4,

笔者的项目是

vue

多页面前端渲染

ssr后端渲染

node后端服务

所以webpack升级相对复杂, 需要自己一点一点解决问题

sideeffects没配置css也还在,webpack4踩坑配置之sideEffects, 打包文件中没有css文件相关推荐

怎么在html文件中写css文件,html头文件中css怎么写？
html头文件中写css的方法:1.将css的样式代码写在html文档头文件<head></head>中的<style></style>标签中:2.在网 ...
html文件中添加css的方式
在html文件中经常会使用css来使自己的页面更加美观. 以下总结在html中添加css的三种方式: 1. 外部样式表 css保存在.css文件中在html中使用引用对于外部样式表,需要创建一个. ...
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法
uniapp(小程序) 配置海康威视-萤石监控(直播替代方案) 踩坑与解决方法因为公司业务需求需要获取监控的摄像头,萤石是给出了几种方案去实现. 直播接入:萤石开放平台API文档小程序接入:萤石 ...
centos 8 使用 nmcli 配置网桥Bridge（最后有踩坑过程）
文章最后有踩坑过程,前面先写正常流程. 背景:最近想在自己笔记本上搭建openstack集群,再在集群上面上面跑K8S. 首先需要准备两个网络供虚拟机使用,一个网络用于连接互联网用来在线安装各种服务和 ...
webpack4踩坑——图片打包
小伙伴们在学习 webpack 的时候有没有这样的经历呢,按照 webpack 官网的教程,一步步构建出自己的脚手架,看到满屏的代码,以及开发环境中花里胡哨的特效,啧啧啧,内心甚至有一丢丢小激动~~~ ...
阿里云配置二级域名与nginx代理踩坑
之前一直想配置一个二级域名.过程中踩了一些坑.现记录下来也给自己一个总结. 1 配置二级域名配置二级域名,也就是我们在主域名下分发一个域名.比如 www.baidu.com ,我们想配置一个www. ...
php删除excel文件,PHPExcel：HTML到Excel,写入删除excel文件中的CSS
我想导出(强制下载) HTML(带CSS)到EXCEL表,现在我使用 PHPExcel库来执行此操作,它生成excel文件但删除CSS(使用内联html标签),任何人都可以指导我,如何将CSS保存在E ...
druid配置：回收线程remove-abandoned使用踩坑
本次踩坑springboot版本2.1.1 druid版本1.1.9 先讲下此次踩坑是怎么回事项目本身为多数据源项目,第二数据源连接了一个只读db,因为该db从库需要进行迁移,所以让这边暂时先连接一 ...
weex css单位,Weex系列(7) ——踩坑填坑的总总
目录使用weex已经一年半了,踩了很多坑,也流了很多泪填上,总结一波,希望对大家有所帮助. LaunchImage 这是今年来的第一个调整,需要把 iOS8.0 and Later勾上,不然iPho ...

sideeffects没配置css也还在,webpack4踩坑配置之sideEffects, 打包文件中没有css文件

sideeffects没配置css也还在,webpack4踩坑配置之sideEffects, 打包文件中没有css文件相关推荐

最新文章

热门文章