带有Vue CLI 3的webpack-modernizr-loader加载程序

Question

我正在将一个项目从旧版本的Webpack和Vue.js转移到Vue cli 3，该项目运行良好，但我在弄清楚如何使其他加载程序正常工作时遇到了麻烦。加载程序是“ webpack-modernizr-loader”，它加载modernizr并允许我检查用户的浏览器是否可以执行promise和其他现代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

我实际上还没有在JS代码中使用modernizr，但是我必须包括它才能使类呈现到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",
    ]
}