webpack5升级指南(踩坑记录)

CssDependency

报错:No template for dependency: CssDependency

image.png
问题关键:webpack开发模式不能使用 MiniCssExtractPlugin.loader

解题思路: MiniCssExtractPlugin.loader是用来提取css样式到css文件中并压缩,但是开发环境启动webpack devServer引用的文件都不是打包在dist目录的,是打包到内存中引用的,所以提取的css没有文件来容纳它,就会报这个错误。

报错:[object Object] is not a PostCSS plugin

image.png
问题关键: 很大可能是项目没有安装postcss
解题思路:

npm i postcss -D
报错: NormalModuleFactory.afterResolve is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created

image.png
问题关键: lodash按需加载插件作者并未升级
解题思路: 升级webpack5后,lodash按需加载的babel插件( babel-plugin-lodash, lodash-webpack-plugin)并没有升级,我目前的方案是改为引入lodash es6版本的,通过webpack5更新后更为强悍的treeShaking来按需加载lodash

npm i lodash-es -S
import {cloneDeep} from "lodash-es"
cloneDeep({a:1,b:2})

Error: Cannot find module 'webpack-cli/bin/config-yargs'
image.png

你可能感兴趣的:(webpack,vue.js,javascript,前端)