webpack-5.x版本 啟動server服務時的報錯和解決辦法

1.報錯:

The 'mode' option has not been set, webpack will fallback to 'production' for this value.

原因:啟動時,沒有指定是開發模式還是線上模式

解決辦法:

在啟動時添加:--mode development   例如:"dev": "webpack server --mode development"

2.報錯:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.

這3個問題都是一個原因:資源(asset)和入口起點超過指定文件限制，需要在 vue.config.js 文件內做如下配置

解決辦法:

在webpack.config.js文件中添加

  //警告 webpack 的性能提示
  performance: {
    hints:'warning',
    //入口起點的最大體積
    maxEntrypointSize: 50000000,
    //生成文件的最大體積
    maxAssetSize: 30000000,
    //只給出 js 文件的性能提示
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.js');
    }
  },