vue-cli3.0.0如何修改babel-loader配置

Question

因为网站使用了vue-cli V 3.4.1,导致出现了iphone下报错

Unexpected keyword 'const'. Const declarations are not supported in strict mode.

所以参考了https://github.com/mrdulin/bl...

里面说明需要降价webpack-dev-server或者修改babel-loader的配置

于是去vue-cli

官网查看，需要操作 webpack-chain 插件

按照 webpack-chain 文档提供的方法修改了vue.config.js的文件

var path = require('path');

module.exports = {
  productionSourceMap: false,

  publicPath: process.env.NODE_ENV === 'production' ?
    '/' : '/',

  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve('src'))
      .set('_c', path.resolve('src/components'))
      .set('_conf', path.resolve('config'))

    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add('src')
      .add('/node_modules/')
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });

  },

  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': []
      }
    }
  },

  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: false
    }
  }
}

然后进行编译，报错如下

 WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
 - configuration.module.rules[13].include should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
       Details:
    * configuration.module.rules[13].include should be an instance of RegExp
    * configuration.module.rules[13].include should be a string.
    * configuration.module.rules[13].include should be an instance of function
    * configuration.module.rules[13].include[0] should be an instance of RegExp
    * configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!
    * configuration.module.rules[13].include[0] should be an instance of function
    * configuration.module.rules[13].include[0] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration.module.rules[13].include[0] should be an object.
    * configuration.module.rules[13].include should be an object.
    * configuration.module.rules[13].include[0] should be an instance of RegExp
    * configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!
    * configuration.module.rules[13].include[0] should be an instance of function
    * configuration.module.rules[13].include[0] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration.module.rules[13].include[0] should be an object.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[13].include should be one of these:
   RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
   -> One or multiple rule conditions
   Details:
    * configuration.module.rules[13].include should be an instance of RegExp
    * configuration.module.rules[13].include should be a string.
    * configuration.module.rules[13].include should be an instance of function
    * configuration.module.rules[13].include[0] should be an instance of RegExp
    * configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!
    * configuration.module.rules[13].include[0] should be an instance of function
    * configuration.module.rules[13].include[0] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration.module.rules[13].include[0] should be an object.
    * configuration.module.rules[13].include should be an object.
    * configuration.module.rules[13].include[0] should be an instance of RegExp
    * configuration.module.rules[13].include[0]: The provided value "src" is not an absolute path!
    * configuration.module.rules[13].include[0] should be an instance of function
    * configuration.module.rules[13].include[0] should be an array:
      [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
    * configuration.module.rules[13].include[0] should be an object.
    at webpack (D:\github.com\JavaScript\wawp\node_modules\webpack\lib\webpack.js:31:9)
    at Promise (D:\github.com\JavaScript\wawp\node_modules\@vue\cli-service\lib\commands\build\index.js:192:5)
    at new Promise (<anonymous>)
    at build (D:\github.com\JavaScript\wawp\node_modules\@vue\cli-service\lib\commands\build\index.js:191:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

请教大神有没有知道这该如何解决的？？？

Answer 1

经过测试发现是swiper包中的swiper.esm.bundle.js是没有经过babel转换的，所以我在未找到更合适的办法前，将这个文件剔除了

Answer 2

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

...
.test(/\.js$/)
  .include
  .add(resolve('src'))