[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor
at module.exports (/home/andrey/smartadmin-app/webpack.config.js:70:9)
at loadConfigByPath (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1745:27)
at async WebpackCLI.loadConfig (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1830:30)
at async WebpackCLI.createCompiler (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:2185:18)
at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/@webpack-cli/serve/lib/index.js:98:30)
at async Promise.all (index 1)
at async Command.<anonymous> (/home/andrey/smartadmin-app/node_modules/webpack-cli/lib/webpack-cli.js:1672:7)
我遇到了这个错误，不明白为什么会出现。我没有改变任何包的版本，只是运行了npm install，结果就出问题了。
{
"name": "react-typescript",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"view-file": "ts-node --project ts.node.config.json ./webpack/createViewFile.ts",
"build-dev": "webpack --env mode=development && npm run build-storybook",
"build-dev-server": "webpack --env mode=development",
"build-prod": "webpack --env mode=production",
"lint": "eslint 'client/**'",
"storybook": "start-storybook -p 5000",
"build-storybook": "build-storybook -o ./public/storybook",
"start": "webpack serve --open"
},
"dependencies": {
"axios": "0.24.0",
"clsx": "1.1.1",
"dotenv": "8.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "7.19.5",
"react-router-dom": "6.0.2",
"react-string-replace": "0.4.4",
"webpack-cli": "4.9.1"
},
"devDependencies": {
"@babel/core": "7.16.0",
"@storybook/addon-actions": "6.4.0-rc.2",
"@storybook/addon-docs": "6.4.0-rc.2",
"@storybook/addon-essentials": "6.4.0-rc.2",
"@storybook/addon-links": "6.4.0-rc.2",
"@storybook/builder-webpack5": "6.4.0-rc.2",
"@storybook/manager-webpack5": "6.4.0-rc.2",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "6.4.0-rc.2",
"@types/express": "4.17.13",
"@types/node": "16.11.7",
"@types/react": "17.0.33",
"@types/react-dom": "17.0.10",
"@typescript-eslint/eslint-plugin": "5.2.0",
"@typescript-eslint/parser": "5.2.0",
"babel-loader": "8.2.3",
"clean-webpack-plugin": "4.0.0",
"compression-webpack-plugin": "9.0.0",
"copy-webpack-plugin": "9.1.0",
"css-loader": "6.5.1",
"eslint": "7.32.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.26.1",
"eslint-plugin-react-hooks": "1.7.0",
"html-webpack-plugin": "5.5.0",
"mini-css-extract-plugin": "2.4.4",
"prettier": "2.4.1",
"sass": "1.43.4",
"sass-loader": "12.3.0",
"style-loader": "3.3.1",
"terser-webpack-plugin": "5.2.4",
"ts-loader": "9.2.6",
"ts-node": "10.4.0",
"typescript": "4.4.4",
"webpack": "5.64.1",
"webpack-dev-server": "4.7.3",
"webpack-manifest-plugin": "4.1.1",
"webpack-nano": "1.1.1"
}
}
我执行的命令是npm run start，我的webpack.config.js文件如下：
require('dotenv').config();
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const { execSync } = require('child_process');
const rules = require('./webpack/rules');
const paths = require('./webpack/paths');
const enviroment = require('./webpack/env');
module.exports = (env) => {
const isProduction = env.mode === enviroment.PRODUCTION;
const isDevServer = !!env.WEBPACK_SERVE;
if (isDevServer) {
return {
watch: true,
mode: enviroment.DEVELOPMENT,
entry: './src/index.tsx',
stats: {
errorDetails: true,
},
module: {
rules: [rules.ts(), rules.css()],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: ['node_modules', 'src'],
},
output: {
filename: 'main.js',
path: paths.public,
publicPath: paths.public,
},
devServer: {
port: 8080,
host: 'localhost',
static: [paths.public],
compress: true,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
historyApiFallback: {
index: '/index.html',
},
client: {
overlay: true,
logging: 'info',
progress: true,
},
devMiddleware: {
writeToDisk: true,
},
},
plugins: [
{
apply(compiler) {
compiler.hooks.environment.tap('removePublicFolder', () => {
execSync('rm -rf public');
});
},
},
new CompressionPlugin(),
new MiniCssExtractPlugin({
filename: isDevServer ? 'main.css' : '[name].[hash].css',
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
new WebpackManifestPlugin({
publicPath: '',
}),
new CopyPlugin({
patterns: [
{ from: paths.views, to: paths.public },
{ from: paths.static, to: paths.public },
],
}),
],
};
}
return {
mode: env.mode,
entry: './src/index.tsx',
stats: {
errorDetails: true,
},
...(isProduction && {
optimization: {
minimize: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
},
}),
module: {
rules: [rules.ts(), rules.css()],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: ['node_modules', 'src'],
},
output: {
filename: '[name].[contenthash].js',
path: paths.public,
publicPath: '/',
},
plugins: [
{
apply(compiler) {
compiler.hooks.environment.tap('removePublicFolder', () => {
execSync('rm -rf public');
});
},
},
new CompressionPlugin(),
new MiniCssExtractPlugin({
filename: isDevServer ? 'main.css' : '[name].[hash].css',
ignoreOrder: true,
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
new WebpackManifestPlugin({
publicPath: '',
}),
{
apply(compiler) {
compiler.hooks.done.tap('done', () => {
execSync('npm run view-file');
execSync('ls');
});
},
},
new CopyPlugin({
patterns: [{ from: paths.static, to: paths.public }],
}),
],
};
};
还有，我会附上./webpack/rules.js，以使其更清晰明了：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('./paths');
const css = () => {
return {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
indentWidth: 4,
includePaths: [paths.styles],
},
},
},
],
};
};
const ts = () => {
return {
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
configFile: 'tsconfig.json',
},
},
],
};
};
module.exports = {
ts,
css,
};