webpack & babel踩坑

webpack这些年遇到的报错
1.
这个问题是由于webpack版本不同导致的写法错误
修改前代码：

options: {
              modules: true, // 以前的版本设置modules为true，然后其他属性和modules同级
              getLocalIdent: (context, localIdentName, localName) => {
                if (
                  context.resourcePath.includes('node_modules') ||
                  context.resourcePath.includes('ant.design.pro.less') ||
                  context.resourcePath.includes('global.less')
                ) {
                  return localName;
                }
                const match = context.resourcePath.match(/src(.*)/);
                if (match && match[1]) {
                  const antdProPath = match[1].replace('.less', '');
                  const arr = slash(antdProPath)
                    .split('/')
                    .map(a => a.replace(/([A-Z])/g, '-$1'))
                    .map(a => a.toLowerCase());
                  return `antd-pro${arr.join('-')}-${localName}`.replace(
                    /--/g,
                    '-',
                  );
                }
                return localName;
              },
            },

修改后代码：

modules: {// 属性都写在modules里面

                getLocalIdent: (context, localIdentName, localName) => {
                  if (
                    context.resourcePath.includes('pages') ||
                    context.resourcePath.includes('node_modules') ||
                    context.resourcePath.includes('ant.design.pro.less') ||
                    context.resourcePath.includes('global.less')
                  ) {
                    return localName;
                  }
                  const match = context.resourcePath.match(/src(.*)/);
                  if (match && match[1]) {
                    const antdProPath = match[1].replace('.less', '');
                    const arr = slash(antdProPath)
                      .split('/')
                      .map(a => a.replace(/([A-Z])/g, '-$1'))
                      .map(a => a.toLowerCase());
                    return `antd-pro${arr.join('-')}-${localName}`.replace(
                      /--/g,
                      '-',
                    );
                  }
                  return localName;
                },
              },

2.babel 报错

async和await是es7的语法，但是经过@babel/preset-env 解析后会将代码转换为一个名为regeneratorRuntime的函数，但是转换后的代码仅仅存在这个函数的调用，并没有具体的定义体现。

解决方式：

plugins: [
    '@babel/plugin-transform-runtime', // 加上这个
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
  ],