webpack3.X 遷移至webpack4.X問題

 

- building for production...(node:22056) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
\ building for production...E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\node_modules\webpack\lib\TemplatedPathPlugin.js:92
                        .replace(
                         ^

TypeError: Cannot read property 'replace' of undefined
    at replacePathVariables (E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\node_modules\webpack\lib\TemplatedPathPlugin.js:92:5)

致使緣由是由於隱藏下邊的filename，此行是給css文件添加hash值

 new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[hash].css'),
      allChunks: true,
    }),

 

- building for production...(node:21940) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
| building for production...E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\node_modules\webpack\lib\TemplatedPathPlugin.js:44
                                throw new Error(
                                ^

Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

這是由於extract-text-webpack-plugin插件給css文件添加hash值出錯

解決方法將contenthash改成hash或者去掉

解釋了extract-text-webpack-plugin與mini-css-extract-plugin的區別：

https://blog.csdn.net/lqlqlq007/article/details/83865176

 

打包後css文件出錯

  
- building for production...(node:11312) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
- building for production...Error processing file: static/css/app.aed755ca29a160df258b.css
Error processing file: static/css/vendor.aed755ca29a160df258b.css
Error processing file: static/css/manifest.aed755ca29a160df258b.css
(node:11312) UnhandledPromiseRejectionWarning: CssSyntaxError: E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\static\css\app.aed755ca29a160df258b.css:2682:47: Missed semicolon
    at Input.error (E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\node_modules\cssnano\node_modules\postcss\lib\input.js:130:16)
    at Parser.checkMissedSemicolon (E:\shjz\projects\Enocare\SRM\srm_web\enocare_srm\node_modules\cssnano\node_modules\postcss\lib\parser.js:603:22)

修改webpack.prod.conf文件，隱藏下邊的代碼

 new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
       : { safe: true }
    }),

https://blog.csdn.net/weixin_42512937/article/details/100105317