Webpack 4 升级到 Webapck 5过程中问题收集

1. ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options[0] misses the property ‘patterns’

解决方案：

new CopyPlugin({
  patterns: [
    { from: "source", to: "dest" },
    { from: "other", to: "public" },
  ],
})

2. TypeError: merge is not a function

解决方案：

const { merge } = require('webpack-merge')

3. Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”

解决方案1：

devtool: 'eval-cheap-module-source-map'

解决方案2：删除devtool

4. Compiling RuleSet failed: Query arguments on ‘loader’ has been removed in favor of the ‘options’ property (at clonedRuleSet-3[0].rules[0].loader: file-loader?name=static/img/[hash].[ext])

将loader: file-loader?name=static/img/[hash].[ext] 修改为 loader: file-loader

5. Vue packages version mismatch: vue@3.0.7 vue-template-compiler@2.6.12

解决方案：安装@vue/compiler-sfc
参考 https://github.com/vuejs/vue-next-webpack-preview/blob/master/package.json

6. HtmlWebpackPlugin didn’t return html

解决方案：升级HtmlWebpackPlugin 插件，webpack 5.22.0以上版本对应 html-webpack-plugin 5.3.0 上版本，测试有效
解决方案2：参考https://blog.csdn.net/vv_bug/article/details/113845376

7. 问题如下

(node:223804) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:223804) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:223804) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:223804) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_LENGTH] DeprecationWarning: chunk.files was changed from Array to Set (using Array property 'length' is deprecated)
(node:223804) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (indexing Array is deprecated)

解决方案：排查发现时webpack uglifyjs-webpack-plugin插件导致的