TypeError: webpack.optimize.UglifyJsPlugin 不是构造函数
Posted
技术标签:
【中文标题】TypeError: webpack.optimize.UglifyJsPlugin 不是构造函数【英文标题】:TypeError: webpack.optimize.UglifyJsPlugin is not a constructor 【发布时间】:2021-11-26 19:15:05 【问题描述】:我遇到了TypeError
并且不确定如何解决它。我期待着您能提供的任何帮助。以下是yarn run build
的终端输出:
BUILD_DIR /Users/blakelucey/Desktop/fsd-next/build
SRC_DIR /Users/blakelucey/Desktop/fsd-next/src
[webpack-cli] TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
at module.exports (/Users/blakelucey/Desktop/fsd-next/webpack.config.js:118:7)
at WebpackCLI.loadConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1589:33)
at async WebpackCLI.resolveConfig (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1677:38)
at async WebpackCLI.createCompiler (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2085:22)
at async WebpackCLI.runWebpack (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:2213:20)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:850:25)
at async Promise.all (index 1)
at async Command.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:1516:13)
error Command failed with exit code 2.
这是webpack.config.js
:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);
module.exports = (env = ) =>
return
entry:
index: [SRC_DIR + '/index.tsx']
,
output:
path: BUILD_DIR,
filename: '[name].bundle.js'
,
node:
fs: "empty"
,
resolve:
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', 'scss']
,
// watch: true,
devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
devServer:
contentBase: BUILD_DIR,
// port: 9001,
compress: true,
hot: true,
open: true
,
// optimization:
// minimizer: [
// new UglifyJsPlugin(sourceMap: true)
// ]
// ,
module:
rules: [
test: /\.tsx?$/,
use: [
loader: 'ts-loader'
],
,
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use:
loader: 'babel-loader',
options:
cacheDirectory: true,
presets: ['react', 'env']
,
test: /\.html$/,
loader: 'html-loader'
,
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract(
fallback: 'style-loader',
use: [
loader: 'css-loader',
options: alias: '../img': '../public/img'
,
loader: 'sass-loader'
]
))
// loader: MiniCssExtractPlugin.loader
,
test: /\.css$/,
use: extractCSS.extract(
fallback: 'style-loader',
use: 'css-loader'
)
// loader: MiniCssExtractPlugin.loader
,
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
// loader: 'url-loader'
loader: 'file-loader',
options:
name: './img/[name].[hash].[ext]'
]
,
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options:
name: './fonts/[name].[hash].[ext]'
]
,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin( sourceMap: true ),
new webpack.NamedModulesPlugin(),
extractCSS,
extractSCSS,
// new MiniCssExtractPlugin(
// // Options similar to the same options in webpackOptions.output
// // both options are optional
// filename: "[name].css",
// chunkFilename: "[id].css"
// ),
new HtmlWebpackPlugin(
inject: true,
template: './public/index.html'
),
new CopyWebpackPlugin([
from: './public/img', to: 'img'
],
copyUnmodified: false
),
new CopyWebpackPlugin([
from: './public/robot.txt', to: 'robot.txt'
],
copyUnmodified: false
)
]
;
我想我需要在这里删除我的 cmets:
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
这里:
// optimization:
// minimizer: [
// new UglifyJsPlugin(sourceMap: true)
// ]
// ,
但我不确定。我期待并感谢您提供的任何意见,谢谢。
【问题讨论】:
【参考方案1】:您可能会注意到插件uglifyjs-webpack-plugin
已被弃用,而terser-webpack-plugin
中的插件作为替代品出现。所以UglifyJsPlugin
插件可能在webpack.optimize
中不可用。因此,这是解决您的问题的一种可能方法:
new webpack.optimize.UglifyJsPlugin( sourceMap: true )
// Remove this ^
并将插件添加到optimizer
:
const TerserPlugin = require("terser-webpack-plugin");
module.exports =
// ...
optimization:
minimize: true,
minimizer: [new TerserPlugin()],
,
// ...
;
关于NamedModulesPlugin is not a constructor
,它也已被弃用,如果您正在使用webpack 5
,您可以找到here。基本上您可以删除该插件并用优化选项替换它:
module.exports =
//...
// NamedModulesPlugin → optimization.moduleIds: 'named'
optimization:
moduleIds: 'named',
,
;
【讨论】:
这确实解决了上面的错误,但是,我收到了一个新错误:webpack-cli] TypeError: webpack.NamedModulesPlugin is not a constructor
。你对我如何解决这个问题有什么建议吗?谢谢。
刚刚更新了关于您的问题的答案以上是关于TypeError: webpack.optimize.UglifyJsPlugin 不是构造函数的主要内容,如果未能解决你的问题,请参考以下文章
TypeError:“TypeError:函数名称不是 HTMLButtonElement.onclick (/:2:54) 处的函数”
反应本机获取多标记[未处理的承诺拒绝:TypeError:TypeError:未定义不是对象(评估'this.state.markers.map
Django TypeError - TypeError: issubclass() arg 1 必须是一个类
pyspark:TypeError:'float'对象不可迭代
Python 3.8 TypeError: can't concat str to bytes - TypeError: a bytes-like object is required, not 's