vue项目中的webpack配置问题集合

Vue项目中的webpack配置问题

记录开发过程中遇到的webpack配置问题

SCRIPT1002: 语法错误

在项目中已经安装有babel-loader，@babel/core等插件的情况下，仍然出现语法错误。
背景

经查原因：

1. 引用的依赖中含有ES6语法，IE浏览器并不支持ES6语法
2. 现有的项目配置，仅对内部代码中的ES6语法转换为了ES5语法，对于其他npm依赖，并没有将其ES6语法转换为ES5语法

---

通过百度搜索，现有的方法并不能解决问题：

1. webpack版本不同，导致部分API并不能直接使用
2. 网络上的方法，引用的babel相关依赖版本过低，很多方法已经不在支持。如：babel-preset-es2015(已被弃用)；@babel/preset-stage-0(已被弃用)等等

通过不断试错，在参考其他大佬的解决方案后终于找到能用的解决办法了。参考链接

原文中的babel-preset-es2015已经不在使用了，取而代之的是功能更为强大的@babel/preset-env。
plugins依赖是看情况下载的。
test中的正则只要改一下里面的文字即可使用。

{
        test: /node_modules[\\\/]three[\\\/].*\.js$/,  // 替换掉three即可
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          presets: ['@babel/preset-env'].map(require.resolve),
          plugins: [
            '@babel/plugin-transform-runtime' // 看情况下载额外转换依赖
          ]
        }
      },

我还是太菜了_(:з」∠)_