0%

Vue打包报错Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

使用命令npm run build进行生产构建时,报错Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.,详细的错误信息如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
^CHu-YupingdeMacBook-Pro:demo2 kris$ npm run build

> demo2@1.0.0 build /Users/kris/Documents/VueDemo/chapter4/demo2
> cross-env NODE_ENV=production webpack --progress --hide-modules

/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/cli.js:93
throw err;
^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
at Object.get [as UglifyJsPlugin] (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack/lib/webpack.js:189:10)
at Object.<anonymous> (/Users/kris/Documents/VueDemo/chapter4/demo2/webpack.config.js:68:26)
at Module._compile (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at yargs.parse (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/cli.js:71:45)
at Object.parse (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/yargs/yargs.js:567:18)
at /Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/cli.js:49:8
at Object.<anonymous> (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/Users/kris/Documents/VueDemo/chapter4/demo2/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo2@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo2@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kris/.npm/_logs/2020-03-19T04_56_08_555Z-debug.log

查资料发现webpack4已经不支持在plugins里面操作UglifyJsPlugin,需要将UglifyJsPlugin放到optimization里面进行配置。打开webpack.config.js文件,发现老的配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
var path = require('path')
var webpack = require('webpack')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

修改完的webpack.config.js文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var path = require('path')
var webpack = require('webpack')
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: false,
}
})
]
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}

改动之处有2处,第一处,把UglifyJsPlugin放到上面的exports的optimization中;第二处,在文件开头之处导入UglifyJsPlugin

改完之后执行npm run dev,效果如下:

1
2
3
4
Hu-YupingdeMacBook-Pro:demo2 kris$ npm run dev

> demo2@1.0.0 dev /Users/kris/Documents/VueDemo/chapter4/demo2
> cross-env NODE_ENV=development webpack-dev-server --open --hot

改完之后执行npm run build,效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
^CHu-YupingdeMacBook-Pro:demo2 kris$ npm run build

> demo2@1.0.0 build /Users/kris/Documents/VueDemo/chapter4/demo2
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: e1e94d754213e6db3b2c
Version: webpack 4.42.0
Time: 1996ms
Built at: 2020-03-19 13:51:57
Asset Size Chunks Chunk Names
build.js 213 KiB 0 [emitted] main
Entrypoint main = build.js

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

参考链接

webpack踩坑之路