webpack打包的时候自动删除dist文件夹

    为了方便前端打包的时候需要重复删除dist文件夹，通过安装clean-webpack-plugin插件来解决这个问题。按照官网的步骤进行安装和配置：https://www.npmjs.com/package/clean-webpack-plugin第一步：安装clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

    第二步：配置

//首先需要在webpack.cconfig.js文件中导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//然后再“plugins”里面实例化这个插件即可
const webpackConfig = {plugins: [new CleanWebpackPlugin(),],
};
module.exports = webpackConfig;

我自己的一个例子

//导入node.js中专门操作路径的模块
const path = require ('path')
//1. 导入HTML插件，需要构造一个函数
const HtmlPlugin = require ('html-webpack-plugin')
// 2. 创建HTML插件的实例化对象
const htmlPlugin =new HtmlPlugin ({template:'./src/index.html',   //指定原文件路径filename: './index.html'   //指定生成文件的路径
})
// 导入一个自动删除“dist”文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {mode:'development',//将文件指定打包路径及打包的名称entry : path.join(__dirname,'./src/index.js'),  //需要打包的文件的路径output : {path : path.join(__dirname,'./dist'), //输出文件存放的路径filename : 'js/main.js'  //生成的文件名},//3. tongguo plugins节点，使htmlPlugin插件生效//将自动删除“dist”文件夹的插件实例化plugins: [htmlPlugin,new CleanWebpackPlugin()],  // 监听文件改动，自动打包devServer: {contentBase:path.join(__dirname,'./'),compress: true,port: 8080,open: 'Chrome',host: '127.0.0.1'},module:{//所有第三方文件模块的匹配规则rules: [//文件后缀名的匹配规则//处理.css文件{test: /\.css$/,use: ['style-loader','css-loader']},//test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件//必须先是'style-loader'，后面才是'css-loader'//处理.less文件{test: /\.less$/,use: ['style-loader','css-loader','less-loader']},//与上面类似//处理图片类型文件{test: /\.jpg|pan|gif$/,use: ['url-loader?limit-22229&outputPath=images']},//limit用来指定图片的大小，单位是字节（byte），只有≤limit的图片才能被转换为base64格式//在配置babel-loader的时候，多个参数之间，使用&富豪进行分隔，对于指定路径的采用“outputPath”参数，后面接指定的路径//处理webpack无法处理的高级语法{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},// 注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包]}
}

webpack打包的时候自动删除dist文件夹相关推荐

实时监测文件夹且根据条件自动删除指定文件夹下文件
一.需求说明当我们的项目开发完成部署到生产环境使用后,为了便于后续的运维工作(对问题及时排查和解决)在项目中编写了一些关于对异常情况或者实时数据自动生成对应的日志文件等内容,但是随着时间的流逝,这些 ...
自动删除指定文件夹下N天前文件的批处理
@echo off if not exist d:\delFiles goto EOF rem 定义文件夹'数组' set folders[0]=folder1 set folders[1]=fold ...
webpack文件夹打包_webpack打包图片没有出现在dist文件夹中
loader配置如下 { test: /\.(png|jpg|gif)$/i, use: [ { loader: "url-loader", options: { limit: 1 ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
webpack打包5之配置清除dist目录插件
之前的基本配置验证的时候,每次打包的都要手动清掉否则会影响页面正常显示.为了解决这个问题需要配置一个清包插件,每次执行打包会自动删除dist包需要用到clean-webpack-plugin 1.安装 ...
linux 删除tmp文件夹,Linux下tmp文件夹的文件自动删除的问题（转）
场景: 近日发现有一台机器tmp文件夹下放置的文件无辜丢失,而且排查发现是自动丢失,并且,只是删除10天之前的文件. 本来以为是哪位写了一个自动执行脚本, find了一下10天前的文件删除了. 结果, ...
vue打包不生成dist文件夹（IDEA使用命令行npm run build命令打包）
记录一下自己的愚蠢问题!!! 问题出现情况:我是使用IDEA打开的vue项目,并在IDEA的命令行(terminal)中执行vue打包命令(npm run build)的,打包结果会显示成功,但是没有 ...
maven打包无法彻底删除target文件夹的问题
1. 描述我在使用maven打包时报错了,其中看到了如下的语句: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clea ...
windows10系统如何恢复被windows denfender自动删除的文件
windows10系统如何恢复被windows denfender自动删除的文件对于windows10系统,小编不得不吐槽一下,真的是好垃圾,还不如win7好用呢,但是也是没有办法,毕竟win10中 ...

webpack打包的时候自动删除dist文件夹

webpack打包的时候自动删除dist文件夹相关推荐

最新文章

热门文章