I’m realizing now, of course, that my implementation of mix’s override utility is somewhat flawed. i have made an issue to track improving the utility to match your expectations.
In the meantime… there are a few ways to handle this today.
For readability, i’m going to refer to mjs
in the following examples, which is this object:
const mjs = {
test: /\.mjs$/i,
resolve: {byDependency: {esm: {fullySpecified: false}}},
}
using the config.override hook
bud.hooks.on('config.override', (configs) => {
configs[0].module.rules.unshift(mjs);
return configs;
})
Note that i am specifying configs[0]
.
Bud always passes the final configuration to webpack as an array – even if there is only one compiler being used. this is because webpack provides different values for stats and the like depending on if you give it a single config or an array of configs (multi-compiler mode). it simplifies things greatly to always get back the same type of response from webpack so we just always pass an array.
using one of the build.module.rules hooks
There are actually three sets of module.rules
for bud. I’m not sure which is best for your project but all of them will be pretty much identical in terms of performance unless you are doing something really complex.
This is the shape of what i’m about to describe, for context:
module: {
rules: [
...before, // build.module.rules.before
oneof, // build.module.rules.oneOf
...after, // build.module.rules.after
],
}
build.module.rules.oneOf
This is the standard type of rule for bud. A oneOf
rule in webpack is a nested rule which is no longer processed after the first match. This makes it much more performant than passing an object to every rule. Transpiling JS is slow enough as-is
To modify the oneOf
ruleset you can use the build.module.rules.oneOf
hook:
hooks.on('build.module.rules.oneOf', (rules) => [...rules, mjs]);
build.module.rules.before
This is a top-level rule which is added to the array before oneOf
. Bud uses this ruleset to help ensure that no node stuff makes it into the browser. @roots/bud-vue
uses it for vue-loader
because Vue is incompatible with oneOf
(for some reason).
hooks.on('build.module.rules.before', (rules) => [...rules, mjs]);
build.module.rules.after
This is a top-level rule which is added to the array after oneOf
. Nothing uses this hook in bud or any of its extensions, but it kind of feel like the sort of thing that should be there in case someone needs it.
hooks.on('build.module.rules.after', (rules) => [...rules, mjs]);
Examples
Check out this gist I made for an example of each of these hooks in the context of Sage. I would start by trying to use a oneOf rule but they all should work.