【webpack执行npm run dev后dist文件被清空】

最新推荐文章于 2024-04-27 08:39:59 发布

what鬼

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量1.2k

点赞数

文章标签： webpack npm 前端

本文链接：https://blog.csdn.net/qq_43542681/article/details/126372629

版权

webpack执行npm run dev后dist文件被清空原因及解决办法

webpack执行npm run dev后dist文件被清空

webpack执行npm run dev后dist文件被清空

原因

dist文件被清空是因为使用了clean-webpack-plugin插件去实现每次npm run build清空dist文件夹中过期的文件，在我们执行npm run build时，发现存在clean-webpack-plugin插件，webpack就会去清空dist中过期的文件，同样的，当我们执行npm run dev时，同样会去执行plugins中的插件，但是npm run dev又不会生成新的文件，所以就造成了dist被清空的现象。

解决思路

执行npm run build时存在并使用clean-webpack-plugin插件，执行npm run dev时删除clean-webpack-plugin插件

怎么判断执行的哪个命令？

通过设置全局环境变量判断执行时机

怎么设置全局环境变量？

通过cross-env设置

使用方法：

//安装cross-env
npm install --save-dev cross-env 
//定义全局变量，可直接在执行命令时定义
"scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-dev-server"
 }
//表明在执行npm run dev时定义NODE_ENV变量，变量值为dev，执行其他命令则没有声明
//之后在webpack配置文件中获取变量
const dev = process.env.NODE_ENV
//接着就是根据dev的值动态设置plugins的属性值
plugins:[
    new MiniCssExtractPlugin()
].contat(dev === 'dev'?[]:[new CleanWebpackPlugin()])

提问

为什么不直接

plugins:[
    new MiniCssExtractPlugin(),process.env.NODE_ENV === 'dev'?'':new CleanWebpackPlugin()
]
//会报错，因为plugins只支持对象和方法类型，该方式语法本身没问题，但是会给plugins的数组设置一个''元素
//plugins不支持元素为''，所以会报错