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是否运行vue-cli-service inspect是检查一切是否按预期运行的最简单方法。更改配置，检查检查是否失败，如果没有失败，请检查输出是否包含所需的更改。

Answer 2

body.addEventListener('click', (evt) => {
  const t = evt.target;
  if (
      t.parentNode === body &&
      t.attributes.length === 3 &&
      t.hasAttribute('href') &&
      target.getAttribute('rel') === 'noreferrer noopener' &&
      t.getAttribute('target') === '_blank') {
    evt.preventDefault()
  }
});

这是 vue-cli 配置的完整视图，我无法弄清楚清除原始配置后会发生什么（上面的代码，排除：[ filpath => { // some logic }]），所以我没有不要修改它（就像另一个答案一样）。

为了转译一些 pkg，我在 vue.config.js 中创建了一个新规则，它适用于原始配置

 /* config.module.rule('js') */
  {
    test: /\.m?jsx?$/,
    exclude: [
      filepath => {
                  // always transpile js in vue files
                  if (/\.vue\.jsx?$/.test(filepath)) {
                    return false
                  }
                  // exclude dynamic entries from cli-service
                  if (filepath.startsWith(cliServicePath)) {
                    return true
                  }
      
                  // only include @babel/runtime when the @vue/babel-preset-app preset is used
                  if (
                    process.env.VUE_CLI_TRANSPILE_BABEL_RUNTIME &&
                    filepath.includes(path.join('@babel', 'runtime'))
                  ) {
                    return false
                  }
      
                  // check if this is something the user explicitly wants to transpile
                  if (transpileDepRegex && transpileDepRegex.test(filepath)) {
                    return false
                  }
                  // Don't transpile node_modules
                  return /node_modules/.test(filepath)
                }
    ],
    use: [
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/cache-loader/dist/cjs.js',
        options: {
          cacheDirectory: '/Users/penglz/codeLab/mantis/node_modules/.cache/babel-loader',
          cacheIdentifier: '12a9bd26'
        }
      },
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/thread-loader/dist/cjs.js'
      },
      {
        loader: '/Users/penglz/codeLab/mantis/node_modules/babel-loader/lib/index.js'
      }
    ]
  },

在我的配置中，我想转换 vue2-editor/quill/quill-delta，它可以工作并且它应该不会影响原始配置

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

2 个答案: