前言

最近vue项目将webpack升级到5.0后，出现一些奇奇怪怪的报错，然后使用网上的解决方法还是没有解决，所以就记下我解决问题的方法。

原因

说实话，一开始看到这么多字的报错也会懵逼，但是看到后面出现BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default,webpack5.X中移除了nodejs核心模块的ployfill自动引入，所以需要手动导入相关模块，我们使用了nodejs核心模块的相关方法，所以webpack提示我们要进行相应的配置

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\weikengdezaoshang\Desktop\vue\front\node_modules\jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
        
        
Module not found: Error: Can't resolve 'stream' in 'C:\Users\weikengdezaoshang\Desktop\前端练习\vue\front\node_modules\jws\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

解决办法

知道原因就蛮好解决的，我们只要导入node-polyfill-webpack-plugin 这个模块就好了

npm install -S node-polyfill-webpack-plugin

然后我们在vue.config.js下面进行configureWebpack 属性配置

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
  devServer:..,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]

  }
}

这样就解决上面的报错了。