现在已经快凌晨 2 点了，我正疯狂地寻找错误。
“错误:webpack.optimize.UglifyJsPlugin 已被删除，请改用 config.optimization.minimize。” 控制台告诉我 100 次...
我尝试像这样修改我的 webpack.config.js:
optimization: {
minimize: false
}
还有这个
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
总是同样的问题...
我的文件没问题，因为它也是捆绑的，但是当我尝试通过
打开它时“start”:“webpack-dev-server --modedevelopment--open--hot”
或
"start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
好吧，没关系，我读过很多关于此的文章，这是 webpack3 -> webpack4 版本的某种问题，但我复制了一些配置代码，只是无法自己弄清楚如何修复它(也许是因为我一台一台地使用笔记本电脑超过 12 小时，累得要命，但我要 sleep 了，只是希望当我醒来时有人，伟大的人，也会帮助我解决这个。
如果您想给我一篇文章而不是答案 - 这也很棒!我对学习新东西充满了兴趣。
但是，如果您帮助提供答案和文章 - 它会给您+100 的运气:)
下面是我的 webpack.config.js 和 package.json:
(我留下这个 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 只是为了向您展示我也尝试对此进行一些优化)
/webpack.config.js
var webpack = require("webpack")
var path = require("path")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
process.noDeprecation = true
module.exports = {
entry: "./src/index.js",
output: {
path:path.join(__dirname, 'dist', 'assets'),
filename: "bundle.js",
sourceMapFilename: 'bundle.map'
},
devtool: '#source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
},
{
test: /\.css$/,
use: ['style-loader','css-loader', {
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}}]
},
{
test: /\.scss/,
use: ['style-loader','css-loader', {
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}}, 'sass-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
warnings: false,
mangle: false
})
]
}
/package.json
{
"name": "try",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [
"React",
"state",
"setState",
"explicitly",
"passing",
"props"
],
"author": "andrii",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "2.0.6",
"style-loader": "^0.23.0",
"uuid": "^3.3.2",
"sass-loader": "6.0.6",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-preset-stage-2": "^6.24.1",
"httpster": "1.0.3",
"isomorphic-fetch": "^2.2.1",
"prop-types": "^15.6.2",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-icons": "^3.1.0",
"react-redux": "5.0.6",
"react-router-dom": "^4.3.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack-dev-server": "^3.1.8"
}
}
此外，为了避免任何愤怒的情绪，我听这个:http://prntscr.com/l31bam如果您也喜欢古典音乐和钢琴，重播超过 2 小时 - 这部作品非常棒。
感谢您的宝贵时间，祝您有美好的一天!
最佳答案
我在生产中使用 webpack4，并且还必须使用 UglifyJsPlugin。
首先我会确保你的 package.json 中有正确版本的 webpack 和 UglifyJsPlugin
我目前有
“webpack”:“4.20.2”，和“uglifyjs-webpack-plugin”:“2.0.1”，
为了确保它们正确安装，我建议通过运行以下命令仔细检查是否安装了正确的版本:
rm -rf node_modules && npm install 或 rm -rf node_modules && yarn install 任何适合您的内容。
接下来我将检查配置。我的 webpack.product.js 的工作原理如下
// ...
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// ...
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false, // set to true if you want JS source maps
}),
],
},
module: {
//...
},
关于javascript - Webpack4优化问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52683852/