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

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

在尝试自己解决这个问题几个小时后，我得到了这个：

确保你的配置命名为.modernizrrc（没有.js），否则你会得到各种错误。
如果我不得不猜测；这可能与它被 babel 错误地包含有关，并且可以通过以某种方式排除文件来避免。
确保安装了 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",
    ]
}

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

webpack-modernizr-loader loader with Vue CLI 3

modernizr

webpack

vue.js

vue-cli

main.js

vue.config.js:

.modernizrrc