Bud Vue - loader not applying to files outside of the @src

bud
,
4

Vue is a special case because it is not compatible with webpack’s oneOf style rules. I don’t remember what their rationale is (if any has been provided).

Rules are parsed in three groups, in the following order:

  • build.module.rules.before - called for every module
  • build.module.rules.oneOf - all rules except vue are applied here
  • build.module.rules.after - called for every module (this is unused by bud internally, but the hook is provided and called in case there is user need).

build.module.rules.oneOf is the preferred group because it doesn’t apply modules unnecessarily. Once it finds a match it exits:

oneOf: an array of Rules from which only the first matching Rule is used when the Rule matches.

@roots/bud-vue has to add vue-loader to the list of rules which are applied to all modules, and it does so by adding it to the rules in build.module.rules.before.

The easiest way to make modifications to the vue rule at the moment is to hook build.module.rules.before:

bud.hooks.on(`build.module.rules.before`, (ruleset) => {
  // make modifications to ruleset array here
  return ruleset
})

I’m not 100% certain but I believe there is one other rule in the array. This rule ensures that browser incompatible code isn’t included in the bundle. I believe that the vue rule should be the first of the two rules, but you can throw in a console log and find out for yourself:

bud.hooks.on(`build.module.rules.before`, (ruleset) => {
  // make modifications to ruleset array here
  console.log(ruleset)
  process.exit()

  return ruleset
})

If it were the first array item, the final code would probably be something like this:

bud.hooks.on(`build.module.rules.before`, (ruleset) => {
  // make modifications to ruleset array here
  ruleset[0].include = [bud.path('./components'), ...ruleset[0].include]
  return ruleset
})

We need to document this and also provide a way to configure it (bud.vue.setInclude or something). But, nobody has asked yet! I’ll try to prioritize that in the near future now that I see the need.

1 Like