webpack优化问题总结(持续总结更新ing...)

1,770 阅读2分钟

1.happypack插件进行构建任务分解给多个子进程去并发的执行,会报错

遇到问题描述,在进行webpack优化时,先使用cache-loader进行缓存优化,然后再使用

happypack插件进行构建任务分解给多个子进程去并发的执行,会报如下错误:

AssertionError [ERR_ASSERTION]: HappyPack: Unrecognized option 'loader'

配置代码如下图:

plugins配置如下:

但现在报错如下:

AssertionError [ERR_ASSERTION]: HappyPack: Unrecognized option 'loader'

大概就是不识别loader的意思。

在尝试对比了N多方法以后,还是一直会报上面的错误,发现把rules里跟plugins都统一使用use这种方式,不再会报上面的错误

但继续会报下面的错误(小心累。。。)

Cannot read property 'outputOptions' of undefined

然后在github上搜索相关的原因是将MiniCssExtractPlugin与HappyPack一起使用时会出现

那就单独把MiniCssExtractPlugin这个loader提到rules里面,不在进行多线程加载

之后会报**Error: No PostCSS Config found in **的错误

解决方法是:当 postcss-loader 配置在 Happypack 中,必须要在项目中创建 postcss.config.js

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
} 

创建完成再启动项目会报如下错误:

TypeError: Cannot read property 'split' of undefined

看着是又回到了mini-css-extract-plugin这个loader上面了

github搜索相关联问题,看到有人反馈了类似问题

但跟我出现的问题还是有区别,我如果把MiniCssExtractPlugin.loader放在'HappyPack/loader?id=css'之后,也就是css-loader等之后这些loader之后,也会出现上面题主的问题

2.uglify-js-plugin打包不支持es6语法的问题

由于uglify-js-plugin版本比较老旧,在打包压缩js代码过程中,由于不支持识别es6语法,打包会报错,建议替换成别的类似功能的插件,如:terser-webpack-plugin

3.在打包时出现如下警告WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

错误原因,资源(asset)和入口起点超过指定文件限制,在webpack配置文件内做如下配置: