webpack4升級extract-text-webpack-plugin和UglifyJsPlugin問題

龍恩0707發表於2018-08-23
WebPluginJS

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", 就自動壓縮了。

相關文章