升级webpack5遇到的一些问题（持续更新）

1. Invalid options object. Copy Plugin has been initialized using an options object that does not match

解决方案：

new CopyWebpackPlugin({
            patterns: [
                { from: path.join(__dirname,'assets'),
                    to: 'assets' }
            ],
        }),

参考：blog.csdn.net/weixin_4430…

2. webpack编译遇到的问题：Error: Cannot find module 'webpack-cli/bin/config-yargs'

解决方案：

1. 卸载当前的 webpack-cli npm uninstall webpack-cli

2. 安装webpack-cli * 版本 npm install webpack-cli@3.3.12 -D

参考：www.cnblogs.com/jiangxiaobo…

3.TypeError: merge is not a function

解决方案：

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

4.Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[3].loader: babel-loader?cacheDirectory)

解决方案：

将loader: 'babel-loader?cacheDirectory',改为loader: 'babel-loader'

5.CSS-loader升级到4.0后，vue-style-loader不生效

解决方案：

方案1、vue-style-loader改为style-loader

方案2、css-loader里配置esModule为false

参考：

github.com/vuejs/vue-s…

github.com/vuejs/vue-s…

6.如果项目业务中有对process.env.NODE_ENV的引用，起服务后会发现process is not defined

解决方案：

plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ],

7、html-webpack-plugin无法inject对应的js。

解决方案：需要查看chunks生成情况，目前是屏蔽了这一块，还待细查

8.ESLint is not a constructor

解决方案：升级 eslint >= 7参考链接：stackoverflow.com/questions/6…

9、__webpack_require__ is not defined 或者 Uncaught TypeError: Cannot read property 'call' of undefined

解决方案：升级webpack5到版本>=5.12.1

主要是因为打包之后__webpack_require__被重写为了__nested__webpack_require_...了。后续作者在5.12.1版本修复了。代码如下连接：github.com/webpack/web…

10、在使用module federation 时，引用共享模块的项目出现 vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_cssW-30142f.js 错误404

解决方案：请在暴露模块的项目中设置publicPath.

11、对于样式上的覆盖问题

scoped的组件可以覆盖scoped组件

tsx组件的module样式可以覆盖module样式

scoped的组件可以覆盖tsx的module的样式问题

但是tsx组件的module样式不可以覆盖scoped组件的样式，因为先后顺序的优先级问题。

（持续更新中。。。）

欢迎志同道合的小伙伴加群商讨