vue.config.js 和 webpack 4：覆盖规则的“排除”或“包含”

Question

我想覆盖 webpack 规则的排除/包含。该项目已创建，vue-cli-sevice因此只有vue.config.js. 我可以使用 连接到配置chainWebpack，但我无法编辑规则本身。

的输出vue-cli-service inspect包含我要编辑的规则：

      /* config.module.rule('js') */
      {
        test: /\.jsx?$/,
        exclude: [
          function () { /* omitted long function */ }
        ],
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: '/Users/m/projects/echo/.../.cache/babel-loader',
              cacheIdentifier: '4b5cee3d'
            }
          },
          {
            loader: 'babel-loader'
          }
        ]
      },

我现在想从我的vue.config.js（注释掉的部分显示我如何在文档中找到它但它不起作用）编辑此配置：

const chainWebpack = (config) => {
    config.module.rule('js');
        // .include
        // .add('node-modules/blubb')
        // .end();
};

module.exports = {
    chainWebpack
};

如何添加include或覆盖exclude此规则配置的属性？

Answer 1

我让它像这样工作。这会清除整个排除并添加一个包含。

const chainWebpack = (config) => {
    config.module
        .rule('js')
        .test(/\.jsx?$/)
            .exclude
                .clear()
            .end()
            .include
                .add(function() {
                    return [
                        'node_modules/include-me',
                        'src'
                    ]
                })
            .end()
};

检查一切是否按预期工作的最简单方法是 IMO to run vue-cli-service inspect。更改配置，检查检查是否失败，如果没有，请检查输出是否包含所需的更改。