NoneVue .config.js & webpack 4: переопределить "исключить" или "включить" правила

Question

Я хочу переопределить исключение / включение правила веб-пакета. Проект был создан с 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

       /* 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'
      }
    ]
  },

это полный обзор конфигурации vue-cli, и я не могу понять, что произойдет после очистки необработанной конфигурации (код выше, exclude: [filpath => {// некоторая логика}]), поэтому я не менял это (как и другой ответ).

чтобы перенести какой-то pkg, я создаю новое правило в моем vue.config.js, оно работает с необработанной конфигурацией

      config.module
  .rule('resolveNodeModules')
  .test(/\.m?jsx?$/)
  .include.add(/node_modules\/(vue2-editor|quill|quill-delta)\/.*/)
  .end()
  .use('babel-loader')
  .loader('babel-loader')

в моей конфигурации я хочу передать vue2-editor / quill / quill-delta, он работает и не должен влиять на исходную конфигурацию

Answer 3

Вы должны использовать «конец» послеexclude.add().