webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题
2018-08-23 22:00 龙恩0707 阅读(9395) 评论(0) 编辑 收藏 举报webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题
1. 使用了extract-text-webpack-plugin插件后,编译出错,代码如下:
new ExtractTextPlugin('[name].css')
报错信息如下:
Tapable.plugin is deprecated. Use new API on `.hooks` instead 报错 webpack is watching the files… (node:64840) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead 1 77% module and chunk tree optimization bound /Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/Chunk.js:824 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/Chunk.js:824:9) at /Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/extract-text-webpack-plugin/index.js:260:39 at Array.forEach (native) at ExtractTextPlugin.<anonymous> (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/extract-text-webpack-plugin/index.js:255:11) at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1) at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/tapable/lib/Hook.js:35:21)
解决方案:用的应该是webpack4吧,换成mini-css-extract-plugin就好了,用法:https://www.npmjs.com/package/mini-css-extract-plugin
2.使用new webpack.optimize.UglifyJsPlugin()时报错
如下代码:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }),
报错信息如下:
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
at Object.get [as UglifyJsPlugin] (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/webpack/lib/webpack.js:174:10)
at Object.<anonymous> (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/build/webpack.config.js:106:25)
at Module._compile (/Users/tugenhua/工作文档/18年项目/xd-f2e-tyr/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
解决方案:
1. webpack内置的JS压缩插件不能使用了,可以安装uglifyjs-webpack-plugin插件,使用同其他非内置插件;
2. --mode production 表示生产环境,只要配置在package.json的script里面 js自动就压缩了
注意:Uglify是压缩js,现在已经不需要了,只需要在script里面写成 "build": "webpack --mode production", 就自动压缩了。