TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
我遇到了一个`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.(/Users/blakelucey/Desktop/fsd-next/node_modules/webpack-cli/lib/webpack-cli.js:850:25) at async Promise.all (index 1) at async Command. (/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 extractCSS = new ExtractTextPlugin('[name].fonts.css'); const extractSCSS = new ExtractTextPlugin('[name].styles.css'); 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'] }, devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map', devServer: { contentBase: BUILD_DIR, compress: true, hot: true, open: 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' } ] })) }, { test: /\.css$/, use: extractCSS.extract({ fallback: 'style-loader', use: 'css-loader' }) }, { test: /\.(png|jpg|jpeg|gif|ico)$/, use: [ { 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.NamedModulesPlugin(), extractCSS, extractSCSS, 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 } ) ] } };
我认为我需要删除这里的注释:
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
和这里的注释:
// optimization: { // minimizer: [ // new UglifyJsPlugin({sourceMap: true}) // ] // },
但我不确定。我期待并感谢你能提供的任何意见,谢谢。
在这段内容中,我们可以看到问题(TypeError: webpack.optimize.UglifyJsPlugin is not a constructor)的出现原因是由于插件uglifyjs-webpack-plugin被弃用,并且terser-webpack-plugin作为替代被引入。因此,webpack.optimize中的UglifyJsPlugin插件很可能无法使用。以下是解决此问题的可能方法:
首先,在配置文件中删除以下行:
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,可以在这里找到解决方法。基本上,你可以删除该插件并将其替换为optimization选项:
module.exports = { //... // NamedModulesPlugin → optimization.moduleIds: 'named' optimization: { moduleIds: 'named', }, };
上述方法可以解决上述错误,但是我遇到了一个新的错误:webpack-cli] TypeError: webpack.NamedModulesPlugin is not a constructor。你有什么建议可以解决这个问题吗?谢谢。
更新了关于你的问题的答案。
在我搜索互联网并遇到以下问题时,我无法解决我的项目问题
问题:TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
解决方法:
解决这个问题的方法是检查webpack.optimize.UglifyJsPlugin是否在webpack配置文件中正确引入,并且是否是构造函数的实例。
在上述链接中,有人遇到了与这个问题类似的情况。他们的问题是在使用async/await时,出现了RegeneratorRuntime is not defined的错误。他们的解决方法是在webpack配置文件中添加一个babel-loader,并将babel-preset-env添加为依赖项。
根据这个解决方法,我们可以尝试在webpack配置文件中添加babel-loader,并将babel-preset-env添加为依赖项。
在webpack配置文件中添加以下代码:
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['babel-preset-env'] } } } ] }
然后,我们需要确保已经安装了babel-loader和babel-preset-env。如果没有安装,可以使用以下命令进行安装:
npm install babel-loader babel-preset-env --save-dev
完成上述步骤后,重新运行webpack,应该就不再出现TypeError: webpack.optimize.UglifyJsPlugin is not a constructor的错误了。
希望这个解决方法对解决这个问题有所帮助!