загрузчик webpack-modernizr-загрузчик с Vue CLI 3

Question

Я нахожусь в процессе переноса проекта из более старой версии Webpack и Vue.js в Vue cli 3, который работает хорошо, за исключением того, что я не могу понять, как заставить работать дополнительный загрузчик.Загрузчик - 'webpack-modernizr-loader', который загружает modernizr и позволяет мне проверить, может ли браузер пользователя выполнять обещания и другие современные функции JavaScript.

Мой старый webpack.config.js выглядит примерно так:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
     ...
      {
        loader: 'webpack-modernizr-loader',
        options: {
          options: [
          ],
          'feature-detects': [
            'test/es6/promises',
            'test/audio/webaudio',
            'test/websockets'
          ]
        },
        test: /empty-alias-file\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      modernizr$: path.resolve(__dirname, './empty-alias-file.js')
    }
  },
  ...
}

С Vue cli 3 у меня есть файл vue.congfig.js, и я не уверен, как преобразовать в него вышеперечисленное.Пока что моя последняя попытка выглядит так:

var path = require('path')

module.exports = {
  ... 
  configureWebpack: {
    module: {
      rules: [
        {
          loader: 'webpack-modernizr-loader',
          options: {
            options: [
            ],
            'feature-detects': [
              'test/es6/promises',
              'test/audio/webaudio',
              'test/websockets'
            ]
          },
          test: /empty-alias-file\.js$/
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        modernizr$: path.resolve(__dirname, './empty-alias-file.js')
      }
    }
  }
}

Но это не работает.Мне бы хотелось, чтобы точка в правильном направлении или пример существующего кода, который делает что-то подобное.

Спасибо!

Answer 1

После нескольких часов попыток исправить это я в итоге получил следующее:

1. Убедитесь, что ваша конфигурация называется .modernizrrc (без .js), в противном случае вы получитевсевозможные ошибки.
   Если бы мне пришлось угадывать;это, вероятно, связано с тем, что он был неправильно включен babel, и его можно избежать, если каким-то образом исключить файл).

2. Убедитесь, что у вас есть webpack-modernizr-loader и modernizr установлены.

main.js

import modernizr from 'modernizr'; // eslint-disable-line no-unused-vars

На самом деле я не использую Modernizr в коде JS,но я должен был включить его, чтобы классы отображались в элементе HTML.Вот почему он не используется (и строка отключена в eslint).

vue.config.js:

const path = require('path');
process.env.VUE_APP_VERSION = require('./package.json').version;

module.exports = {
  baseUrl: '/',
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '~': path.resolve(__dirname, 'src/'),
        '@': path.resolve('src/'),
        modernizr$: path.resolve(__dirname, '.modernizrrc'),
      },
    },
  },
  chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          ...options.compilerOptions,
          preserveWhitespace: true,
        },
      }));
    config.module
      .rule('modernizr')
      .test(/\.modernizrrc$/)
      .use('webpack-modernizr-loader')
      .loader('webpack-modernizr-loader');
  },
};

.modernizrrc

(массивы сокращеныради этой длины ответов)

module.exports = {
    "minify": true,
    "options": [
      "mq",
      ...
      "prefixed",
    ],
    "feature-detects": [
      "test/css/all",
      ...
      "test/css/animations",
    ]
}