死亡是一座永恒的灯塔

0%

webpack打包报错CleanWebpackPlugin is not a constructor

问题描述

版本信息

webpack 4.41.2
clean-webpack-plugin 3.0.0

webpack打包报错信息

1
CleanWebpackPlugin is not a constructor.

Webpack Config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

问题解决过程

查看clean-webpack-plugin官方文档的例子,发现其声明方式和webpack官方文档中的不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 声明方式和webpack官方文档中的不一样
const HtmlWebpackPlugin = require('html-webpack-plugin'); // installed via npm
const webpack = require('webpack'); // to access built-in plugins
const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
/**
* With zero configuration,
* clean-webpack-plugin will remove files inside the directory below
*/
path: path.resolve(process.cwd(), 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};

问题出现原因

插件更新,改变了使用方式

问题解决方案

使用clean-webpack-plugin官方文档中的声明方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

感想

过时的资料害死人啊

坚持技术分享,您的支持将鼓励我继续创作!