webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题

2018-08-23 22:00 龙恩0707 阅读(9404) 评论(0) 编辑收藏举报

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", 就自动压缩了。