webpack 4.0 中 clean-webpack-plugin 的使用

2024-05-09 21:05:54

其实 clean-webpack-plugin 很容易知道它的作用，就是来清除文件的。

一般这个插件是配合 webpack -p 这条命令来使用，就是说在为生产环境编译文件的时候，先把 build或dist (就是放生产环境用的文件) 目录里的文件先清除干净，再生成新的。

1. 为什么要用 clean-webpack-plugin

如果还不理解为什么要用它，就看看下面的例子就可以知道的。

webpack.config.js

const path = require('path')
...module.exports = {entry: {"app.bundle": './src'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},...};

在终端上运行：

$ npm run build

看看 dist 目录：

dist
├── app.bundle.e56abf8d6e5742c78c4b.js ├── index.html └── style.css

你再把 src/index.js 改改内容，然后再执行 npm run build。

再多运行几次，生成的带 hash 的 app.bundle.js 文件就会很多。

dist
├── app.bundle.0e380cea371d050137cd.js ├── app.bundle.259c34c1603489ef3572.js ├── app.bundle.e56abf8d6e5742c78c4b.js ├── index.html └── style.css

这些带 hash 的 app.bundle.js 只有最新的才有用，其他的都没用，我们要在 build 之前把它们全清空，这真是 clean-webpack-plugin 发挥的作用。

2. 使用 clean-webpack-plugin

首先来安装。

$ npm i clean-webpack-plugin --save-dev

webpack.config.js

plugins:[new CleanWebpackPlugin(),new HtmlWebpackPlugin({template:'./src/index.html'})]

现在运行 npm run build 试试

注意的是：在最新版的webpack中 new CleanWebpackPlugin()；中不需要写里面的目标路径，会自动清除生成的文件夹，比如是build文件夹。

转载：https://www.jianshu.com/p/f4a209d58c35

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10792168.html

webpack 4.0 中 clean-webpack-plugin 的使用相关推荐

openmvide使用需要什么插件_在Django中使用Webpack：再也不需要插件了！
这篇文章将会学习如何在Django中以最小的代价安装Webpack.这个问题常规的解决办法是使用django-webpack-loader,但是在我看来这种方式代价太大.这篇文章的目的是提供一个在Dj ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Webpack 4.0 打包 Vue 应用时出现无法使用Vue-loader问题及解决方法
问题产生当我们写好 app.vue webpack.config.js 后满心欢喜的在命令行输入 npm run build 复制代码后结果发现报出 vue-loader was used wi ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...
webpack 4.0 小记
介绍其实之前也会看一些 webpack 脚手架的配置,但是使用的插件实在是太多了,不了解各个插件的左右是一个很大的瓶颈,所以着手认识认识各大插件. 项目地址,之前一直都是用脚手架工具,最近得闲就学习 ...
webpack从0配置和使用
webpack 1. webpack 概念: 支持模块化和打包核心功能实现前端模块化开发,支持 CommonJS.AMD.CMD,ES6 方案支持模块化开发,并且帮我们建立,模块之间的依赖关 ...
基于less和sass在webpack或vite中的动态主题的实现方案
2021-12-26更新在线动态主题的实现,比原文中提到的方案六的插件更加易用,具有如下特点: 使用成本很低跟ui框架无关,Element-ui.iview.Ant-design 等等等(只要基于 ...
走近webpack（0）--正文之前的故事
在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...
前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web
作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅 ...

最新文章

热门文章