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升级相对复杂, 需要自己一点一点解决问题