最开始先来讲一下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升级相对复杂, 需要自己一点一点解决问题