webpack学习（四）：配置CleanWebpackPlugin

迷南。 2022-04-06 08:26 627阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
**上次配置HtmlWebpackPlugin: [https://blog.csdn.net/qq593249106/article/details/84900169][https_blog.csdn.net_qq593249106_article_details_84900169]**

继上次配置完 HtmlWebpackPlugin 之后, 发现 dist 目录下产生了很多个 bundle.js 文件:  
**当前目录结构:**

|- /dist //用于放打包后文件的文件夹
      |- app.bundle.js //这一次构建的出口文件
      |- print.bundle.js //这一次构建的出口文件
      |- bundle.js //前一次构建的出口文件
      |- index.html //模板文件
    |- /node_modules
    |- /src //用于放源文件的文件夹
      |- index.js //入口文件
      |- print.js //入口文件
    |- package.json
    |- webpack.config.js //webpack配置文件

这是因为每次重构, 前一次的出口文件不会被清除, 所以就同时存在了前一次( bundle.js )和这一次的出口文件( app.bundle.js 和 print.bundle.js), 而前一次的 bundle.js 已经用不到了, 没有存在意义

## 清理 dist 文件夹 ##

使用 CleanWebpackPlugin 插件可以在每次构建前都清楚 dist 文件夹, 这样每次构建完, dist 目录下只有会生成要用到的文件

## 安装CleanWebpackPlugin ##

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

## 配置webpack.config.js ##

**webpack.config.js**

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    
    
    module.exports = { 
        entry: { 
            app: './src/index.js', //多个入口文件
            print: './src/print.js'
        },
        plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
            new CleanWebpackPlugin(['dist']), //设置清除的目录
            new HtmlWebpackPlugin({ 
                filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            })
        ],
        output: { 
            filename: '[name].bundle.js', //根据入口文件输出不同出口文件
            path: path.resolve(__dirname, 'dist')
        }
    };

## 重新构建 ##

终端输入 npm run build , 打开index.html:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
输出没问题, 构建成功, 再看看此时的目录结构:

|- /dist //用于放打包后文件的文件夹
      |- app.bundle.js //这一次构建的出口文件
      |- print.bundle.js //这一次构建的出口文件
      |- index.html //模板文件
    |- /node_modules
    |- /src //用于放源文件的文件夹
      |- index.js //入口文件
    |- package.json
    |- webpack.config.js //webpack配置文件

可以发现前一次的 bundle.js 文件已经被清掉了, 成功配置了 CleanWebpackPlugin 插件

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84900169]: https://blog.csdn.net/qq593249106/article/details/84900169
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/95544f7216e4490c9e66f04cc8bf659c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，627人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习(四)基础入门-webpack(3)-配置vue

引入vue.js ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

清疚/ 2023年06月13日 13:25/ 0 赞/ 27 阅读

相关 webpack学习（九）：配置sass

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

我不是女神ヾ/ 2022年04月06日 17:42/ 0 赞/ 628 阅读

相关 webpack学习（八）：配置react

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

淡淡的烟草味﹌/ 2022年04月06日 15:30/ 0 赞/ 278 阅读

相关 webpack学习（四）：配置CleanWebpackPlugin

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

迷南。/ 2022年04月06日 08:26/ 0 赞/ 628 阅读

相关 webpack学习（三）：配置HtmlWebpackPlugin

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

约定不等于承诺〃/ 2022年04月06日 08:05/ 0 赞/ 299 阅读

相关 webpack学习（一）：初步配置webpack

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

女爷i/ 2022年04月06日 05:27/ 0 赞/ 295 阅读

相关学习webpack（二）之 webpack配置

简述 > 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你

我不是女神ヾ/ 2022年04月03日 14:20/ 0 赞/ 359 阅读

相关如何学习配置webpack(一）

项目小白如何从0开始配置webpack 自己配置过webpack的人应该都知道，webpack真的好复杂，一开始做项目都是拿别人现成的做做小修改，但是别人的终究没有自己配

迷南。/ 2022年01月18日 23:37/ 0 赞/ 241 阅读

相关 webpack 采坑（CleanWebpackPlugin 插件报错： CleanWebpackPlugin is not a constructor ；）

坑一： CleanWebpackPlugin 插件报错：CleanWebpackPlugin is not a constructor ； webpack.config.js

以你之姓@/ 2022年01月07日 14:07/ 0 赞/ 284 阅读

相关 [webpack]解决报错 CleanWebpackPlugin is not a constructor

错误写法 const CleanWebpackPlugin = require("clean-webpack-plugin"); 正确写法： let

Myth丶恋晨/ 2021年11月10日 16:24/ 0 赞/ 339 阅读