Question

我正在尝试通过webpack-server-dev预览vue Web应用程序。我正在遵循本指南 https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

指南说明该插件用于删除dist目录中的旧文件和未使用的文件。我已经尝试用某些帖子建议的const CleanWebpackPlugin = require('clean-webpack-plugin')替换const { CleanWebpackPlugin } = require('clean-webpack-plugin')。我也曾尝试查看https://github.com/johnagan/clean-webpack-plugin上的文档，但是由于我对此还很陌生，因此没有成功。

当我尝试npm run dev时收到此错误

    new CleanWebpackPlugin(['dist']),
    ^

TypeError: CleanWebpackPlugin is not a constructor
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

这是webpack.config.js文件

const path = require('path')

const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = (env, argv) => ({
  mode: argv && argv.mode || 'development',
  devtool: (argv && argv.mode || 'development') === 'production' ? 'source-map' : 'eval',

  entry: './src/app.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  node: false,

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
        exclude: /\.module\.css$/
      }
    ]
  },

  resolve: {
    extensions: [
      '.js',
      '.vue',
      '.json'
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'src')
    }
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'static', 'index.html'),
      inject: true
    }),
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'static'),
      to: path.resolve(__dirname, 'dist'),
      toType: 'dir'
    }])
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    },
    mangleWasmImports: true,
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true
  },

  devServer: {
    compress: true,
    host: 'localhost',
    https: true,
    open: true,
    overlay: true,
    port: 9000
  }
});

这是我在使用正确的导入时遇到的错误，如文档中所述：

      throw new Error(`clean-webpack-plugin only accepts an options object. See:
      ^

Error: clean-webpack-plugin only accepts an options object. See:
            https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional
    at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)

如果我删除webpack.config.js中的第56行，我可以运行Web应用程序而不会出现问题，但是我想了解此问题的来源

Answer 1

正确的方法是使用此导入：

fromDER

然后将其更改为

，而不是通过分发文件夹传递数组

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

Answer 2

我今天有同样的问题，现在。如您所知，文档和实际代码之间不匹配。实际上，您可以在the last commit they merged中看到两个文档：

以及代码：

所以我刚刚从const CleanWebpackPlugin = require('clean-webpack-plugin')切换到了

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

它工作正常。

我认为您可能已陷入困境。重新安装npm软件包，然后重试，它应该可以工作。

我写了一些您可以在他们的公共存储库中看到的内容，因为经常发生这种突然变化时，您可能会在回购中找到自己的答案，可能是在最后一次提交中。最好阅读一些您使用的代码，尤其是当它有助于您解决问题时：）

Answer 3

使用此更新，您需要执行以下操作以包含该更新

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

然后在插件数组中替换添加以下内容

plugins: [
     new CleanWebpackPlugin(['dist]),
]

使用

plugins: [
     new CleanWebpackPlugin(),
]

与更新一起，不需要传递任何参数，因为它将在每次成功重建后删除webpack的output.path目录中的所有文件，以及所有未使用的webpack资产。

Answer 4

对于那些使用 nativescript-vue 的最新更新发现此错误的人，我通过更改webpack.config.js（应用文件夹中的顶级文件）来解决此问题。如上所述，它现在反映了CleanWebpackPlugin docs中的语法。

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

和

//new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
  new CleanWebpackPlugin(),

Answer 5

CleanWebpackPlugin v3.0.0

已将默认导出替换为已命名的导出CleanWebpackPlugin

[https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0]

正确的代码是：

// es modules
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

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

Answer 6

导入时使用 { CleanWebpackPlugin } 而不是 CleanWebpackPlugin

当版本大于 1 时会发生这种情况。

示例：

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

Answer 7

我对webpack不太熟悉，目前正在学习

尽管下面的内容可以帮助我解决问题

我只是卸载clean-webpack-plugin，然后作为依赖项重新安装在此之前，我已将其视为开发人员依赖项

卸载并像这样安装后：npm install --save clean-webpack-plugin

并添加此

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

解决了我的问题！

希望有帮助

Answer 8

我遇到了同样的问题，并通过以下方式解决了该问题：

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

plugins: [
    new CleanWebpackPlugin({
        cleanAfterEveryBuildPatterns: ['dist']
    })
]

Answer 9

我今天遇到了同样的问题，我发现我还必须删除webpack.config.js文件。

删除文件后，我不得不重新运行npm install

->应用程序成功启动。

-

在webpack.config.js内放置了一些旧参考。

Answer 10

这可能是一个怪异的异常原因-但是我刚在新Linux机器上设置旧项目时碰到了这一点。原来我没有为我的项目安装dev依赖项（默认情况下，如果npm config设置为生产，则在运行npm install时不会安装dev依赖项-尽管我不确定为什么将我的设置为生产），我的webpack cli是4，但是我的项目是2.6.1，所以它使用的是webpack 4，但是我的webpack.config是2。所以请确保已安装开发依赖。

Answer 11

也要注意这样写

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

而不是这样：

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

就我而言，小写字母 C 是个问题。导入的是这个插件的类名，所以命名不能随意。

Answer 12

看起来像文档已损坏，正确的代码是

const CleanWebpackPlugin = require（'clean-webpack-plugin'）

TypeError：CleanwebpackPlugin不是构造函数

12 个答案: