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插件导致的

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值