时间戳

首页 > 解决方案 > Webpack/webpack-cleanup-plugin: webpack.config.js 只做清理

webpack - Webpack/webpack-cleanup-plugin: webpack.config.js 只做清理

问题描述

是否可以配置webpack.config.js只进行清理（使用“webpack-cleanup-plugin”），而无需配置entryoroutput参数？

标签： webpack

解决方案

如果你想运行 cleanup 插件但不想让 webpack 捆绑你的文件，那么这是不可能的，因为 webpack 的主要目标是捆绑你的依赖项，而像 cleanup 这样的任务是附加组件

可能有更好的方法来做这件事，但要回答你的问题

无需配置输入或输出参数？

是的，如果你没有指定 entry 或 output 参数，这在 Webpack 4 中是可能的，它将使用默认值，即src/index.jsentry 和distforoutput.folder

如果找不到入口文件，Webpack 将抛出错误， 因此如果您不指定入口，则src/index.js必须存在于您的项目中

所以可以说你的文件夹结构如下

| src
     |index.js
| libs
| build

现在如果你想清理build目录然后你创建一个这样的配置

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

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      // takes an array so you can specify multiple patterns
      // build/**/* will clean everything inside build but not build directory itself
      cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(), 'build/**/*')]
    }),
  ]
};

请注意，现在您需要指定cleanOnceBeforeBuildPatterns因为默认情况下clean-webpack-plugin

将删除 webpack 的 output.path 目录中的所有文件

我们没有指定 output.path 所以它的默认值dist更准确path.resolve(process.cwd(), 'dist')但是我们想清理里面的所有东西build

您可以指定其他选项，例如

cleanOnceBeforeBuildPatterns,cleanAfterEveryBuildPatterns或事件，如果您想在项目之外进行清理，那么您无法dangerouslyAllowCleanPatternsOutsideProject在此处true设置 更多信息

因为使用这个配置运行 webpack 也会创建dist/main.js包，所以我们也需要删除它，所以你的脚本可能看起来像这样

  "scripts": {
    "clean": "webpack --config webpack.config.js && rm -rf ./dist"
  }

一种更简单的方法是在package.json文件中指定一个简单的 bash 命令，例如

  "scripts": {
    "clean": "rm -rf ./build/**"
  }

你可以像这样运行它yarn clean或npm run clean

推荐阅读