[英]Webpack4 optimization issue
it's almost 2am and I'm just going insane seeking for a mistake.快凌晨 2 点了,我正在发疯寻找错误。
"Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead."
console told me for 100 time...控制台告诉我 100 次...
I've tried to modify my webpack.config.js like this:我试图像这样修改我的 webpack.config.js:
optimization: {
minimize: false
}
and this和这个
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
})
]
},
and always the same problem...并且总是同样的问题......
My files are ok because it's bundled as well, but when I try to open it by我的文件没问题,因为它也是捆绑的,但是当我尝试通过以下方式打开它时
"start": "webpack-dev-server --mode development --open --hot"
or或者
"start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"
well, it doesn't matter, I had read many articles about this, it's some kind of problem with webpack3 -> webpack4 version, but I've copied some code for configuration and just can't figure out by myself how to fix it (maybe it's because I'm 12+ hours with laptop one by one and tired as hell, but I'm going to sleep and just hope that when I woke up someone, great person, as well will help me to solve this.好吧,没关系,我已经阅读了很多关于此的文章,这是 webpack3 -> webpack4 版本的某种问题,但是我复制了一些代码进行配置,只是自己无法弄清楚如何解决它(也许是因为我一个接一个地使用笔记本电脑超过 12 个小时,累得要死,但我要睡觉了,只是希望当我醒来时有人,伟大的人,也能帮助我解决这个问题。
If you some kind of a person that wants to give me an article instead of an answer - it's great too!如果你是一个想给我一篇文章而不是一个答案的人 - 这也很棒! I'm full about learning new stuff.
我对学习新东西充满热情。
But, if you help with an answer and article - it'll give you +100 to your luck :)但是,如果您对答案和文章有所帮助-它会给您+100 的运气:)
my webpack.config.js and package.json below:我的 webpack.config.js 和 package.json 如下:
(I left this const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
just to show you that I tried to do some optimization with this as well) (我留下这个
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"
}
}
Also, to avoid any angry mood I listen to this: http://prntscr.com/l31bam on replay over 2+ hours if you like classic and piano as well - this composition is brilliant.另外,为了避免任何愤怒的情绪,我会听这个: http : //prntscr.com/l31bam如果您也喜欢古典音乐和钢琴,则重播超过 2 小时 - 这首乐曲很棒。
Thank you for your time and have a nice day!谢谢你的时间,祝你有美好的一天!
I use webpack4 on production and have to use UglifyJsPlugin as well.我在生产中使用 webpack4,并且也必须使用 UglifyJsPlugin。
First of all I would ensure that you have proper version of webpack and UglifyJsPlugin in your package.json I currently have "webpack": "4.20.2",
and "uglifyjs-webpack-plugin": "2.0.1",
To ensure that they are properly installed I would advise to double check that proper versions are installed by running: rm -rf node_modules && npm install
OR rm -rf node_modules && yarn install
whatever works for you.首先,我会确保您的 package.json 中有正确版本的 webpack 和 UglifyJsPlugin 我目前有
"webpack": "4.20.2",
和"uglifyjs-webpack-plugin": "2.0.1",
以确保我建议他们通过运行来仔细检查是否安装了正确的版本: rm -rf node_modules && npm install
OR rm -rf node_modules && yarn install
任何对你rm -rf node_modules && yarn install
东西。
Next I would check the config.接下来我会检查配置。 My webpack.production.js which works is the following
我的 webpack.production.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: {
//...
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.