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

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配置文件内做如下配置：