6、清除dist目录(clean-webpack-plugin插件)

简介: 6、清除dist目录(clean-webpack-plugin插件)

清除dist目录(clean-webpack-plugin插件)


  • 作用:在每次打包前清除之前打包的dist文件
  • 1、安装依赖包:yarn add clean-webpack-plugin -D


yarn add clean-webpack-plugin -D


  • 2、导入插件


const { CleanWebpackPlugin } = require('clean-webpack-plugin');


  • 3、调用插件
  // 5、调用插件
  plugins: [
    // 自动生成html文件
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    // 分离css文件
    new MiniCssExtractPlugin({ filename: 'css/index.css' }),
    // 清除dist文件
    new CleanWebpackPlugin()
  ],


相关文章
|
4天前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
10 0
|
3月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
170 3
|
JavaScript 开发者
webpack----webpack中的插件
webpack----webpack中的插件
|
3月前
|
JavaScript 应用服务中间件 nginx
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
295 0
|
3月前
|
前端开发 JavaScript API
webpack插件开发必会Tapable
webpack插件开发必会Tapable
73 0
|
3月前
|
JSON 监控 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> 提升插件健壮性
《Webpack5 核心原理与应用实践》学习笔记-> 提升插件健壮性
73 0
|
3月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
103 0
|
Web App开发 JavaScript 前端开发
揭秘webpack插件工作流程和原理(二)
揭秘webpack插件工作流程和原理
117 3
|
前端开发 编译器 API
揭秘webpack插件工作流程和原理(一)
揭秘webpack插件工作流程和原理
134 2
|
JavaScript 前端开发 API
webpack学习笔记(原理,实现loader和插件)下
webpack学习笔记(原理,实现loader和插件)
76 0