clean-webpack-plugin报错CleanWebpackPlugin is not a constructor

最近在学习webpack的时候发现的问题,跟着文档动手发现这个文档确实没有更新最新的写法,因此在此记录下来。 webpack文档

原文档的 webpack.config.js 配置:html

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'
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

npm run build 以后报错:webpack

TypeError: CleanWebpackPlugin is not a constructor
...

因而我翻看了插件的npm页面,发现写法已经更新:clean-webpack-plugin
也就是下面我两个注释处修改的写法:es6

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

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    devtool: 'inline-source-map',
    plugins: [
        //new CleanWebpackPlugin(['dist']),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

再次 npm run build 后没有报错,插件运行正常。
上面这样修改配置已经能够知足每次编译清理 dist 目录下的文件了,更多配置能够去插件npm的页面查看说明,上面也贴了连接。web

至于为何要这么写,能够去了解一下ES6的对象的解构赋值npm

相关文章
相关标签/搜索