javascript - TypeError: CleanwebpackPlugin no es un constructor

vue.js webpack-dev-server

Question

Estoy tratando de obtener una vista previa de una aplicación web vue a través de webpack-server-dev. Estoy siguiendo esta guía https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

La guía explica que el complemento se utiliza para eliminar archivos antiguos y no utilizados en el directorio dist. Ya he intentado reemplazar const CleanWebpackPlugin = require(''clean-webpack-plugin'') con const { CleanWebpackPlugin } = require(''clean-webpack-plugin'') que sugieren algunas publicaciones. También he intentado consultar la documentación en https://github.com/johnagan/clean-webpack-plugin pero sin éxito, ya que soy bastante nuevo en esto.

Cuando intento npm run dev este error

    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)

y este es el archivo 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
  }
});

este es el error que obtengo al usar la importación correcta como se explica en la documentación:

      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) 

Si elimino la línea 56 en webpack.config.js puedo ejecutar la aplicación web sin problemas, pero quiero entender el origen de este problema.

Answer 1

Con la actualización necesitarás hacer lo siguiente para incluirla.

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

Luego, en la matriz de plugins reemplazar agregue lo siguiente

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

con

plugins: [
     new CleanWebpackPlugin(),
]

Como con la actualización, no hay necesidad de pasar ningún parámetro, ya que eliminará todos los archivos dentro del directorio output.path de output.path , así como todos los activos de webpack no utilizados después de cada reconstrucción exitosa.

Answer 2

El correcto es usar esta importación:

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

Y luego, en lugar de pasar una matriz con la carpeta de distribución, cámbiela a

plugins: [
     new CleanWebpackPlugin(),
     //...
]

Answer 3

Parece que los documentos están rotos, el código correcto es

const CleanWebpackPlugin = require (''clean-webpack-plugin'')

Answer 4

Tuve el mismo problema hoy, ahora mismo. Como puede ver, hubo una discrepancia entre los documentos y el código real. Y, de hecho, puede ver en el último compromiso que se fusionaron tanto con la documentación:

y también al código:

Así que acabo de cambiar de const CleanWebpackPlugin = require(''clean-webpack-plugin'') a

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

y funciona bien.

Creo que puede haber sido atrapado entre las cosas. Reinstale el paquete npm y vuelva a intentarlo, debería funcionar.

Escribí un poco de lo que puedes ver en su repositorio público porque, muy a menudo, cuando ocurren cambios repentinos como este, encontrarás tu propia respuesta en el repositorio , probablemente en las últimas confirmaciones. Y es bueno leer un poco del código que usas, especialmente si te ayuda a solucionar tu problema :)