Overriding file loader rules to add exceptions #1423
Comments
Here is how you can add your own loaders. mix.webpackConfig({
module: {
rules: [
// your rules may go here
// next rules are just example, you can modify them according to your needs
{
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'file-loader?name=[name].[ext]?[hash]'
}
]
}
}); Not tested. |
That isn't going to work. I want to exclude the If I just add my own rule for handling only SVGs (or SVGs within Quill's specific path), the default one executes first, and returns back the file path instead of its content. |
This should be fixed in the next release, which will be out today. |
Release 2.0 doesn't fix my issue, it just changes the output of quill SVGs in the images dir instead of the fonts dir. |
Since this issue is now closed I don't expect any more replies. In the meantime, my custom solution was to add an exception to the webpack rule by cycling through Mix's webpack configuration, like this: const mix = require('laravel-mix');
const quillIconsRegex = /node_modules\/quill\/assets\/icons\/(.*)\.svg$/;
// Exclude quill icons
Mix.listen('configReady', function(config) {
const rules = config.module.rules;
const targetRe = /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/;
for (let rule of rules) {
if (rule.test.toString() == targetRe.toString()) {
rule.exclude = quillIconsRegex;
break;
}
}
});
// Use a custom loader for Quill inline icons
mix.webpackConfig({
module: {
rules: [{
test: quillIconsRegex,
use: [{
loader: 'html-loader',
options: {
minimize: true
}
}]
}]
}
}); I'd like a better way to do this though, the file loader regex that I'm using to find the rule could change anytime. |
I think that would at least require named rules. mix.webpackConfig({
module: {
rules: [{
name: 'images',
exclude: /node_modules\/quill\/assets\/icons\/(.*)\.svg$/
}]
}
} |
@tpraxl Yes! That would be a nice step forward! Is |
I'm not sure. If the name property causes problems, then the names could be removed before actually using the rules with webpack. This is why we would have to look deeper into it. Also, this maybe is a performance issue, because we're not simply pushing but we would need to merge. I'm currently too busy, but I'm interested in this as well. If I won't have posted anything new about this topic here in 2 weeks, please remind me :) |
Just checked:
Sure! Thanks. |
@tpraxl, I remind you))) |
I use a ckeditor and it requires an |
@tegola thanks for example, but |
@ZapevalovAnton You need to use the Mix object (uppercase 'M'), so it's |
@tegola Thanks!) |
@ZapevalovAnton hehe:) I remember it very well. Yet, I still have time until the fortnight is over. Hopefully, I can look into it then, but it might as well take longer. |
@tegola could you point me to a resource for the valid webpack schema? I'd like to research valid options first. If there's no such option, we could try to name the rules anyway and remove the names before we feed the rules to webpack. But I'd rather try to avoid complicated hacks if possible. |
Actually, it looks as if it would be pretty easy to use an object with rule names instead of the rules, merge that with the user config and return an array of rules afterwards. Minimal changes required, all tests are green, but I want to test that manually as well, just to be sure. Just had about half an hour to tinker with the idea. |
@tegola I'll have a look at it too, as soon as I've got some time. |
Nope. This attempt introduces all sorts of problems. You could override a given rule, but:
I think we need another API method that allows us to explicitly override a rule. I'll think about it. |
@tpraxl thanks for spending your time looking into this. I currently have no spare time to dedicate to the project, and don't even know well webpack and laravel mix config builder, actually. I'll keep a look at this thread and help in any possible way. |
There's an early working version that allows to override, skip and customize (merge) the webpack rules: https://github.com/tpraxl/laravel-mix/tree/feature/override-and-merge-rules Still need to test that manually and to update the README before I can post a Pull-Request. |
I tried to setup a quill example project, can't tell if it looks like it is supposed to and I don't want to spend too much time with quill. @tegola You are not wasting your time. I promise that the customization will take effect. The question is: does it have the desired effect? A) Test this version of laravel-mix with your project setup Just clone the sources, copy them into your node_modules folder to replace the official laravel-mix version. Then replace your webpack.mix.js workaround with this: const quillIconsRegex = /node_modules\/quill\/assets\/icons\/(.*)\.svg$/;
Mix.customizeRule.images = (rule, Config) => {
console.warn('using experimental mix version');
rule.exclude = quillIconsRegex;
return rule;
};
mix.webpackConfig({
module: {
rules: [{
test: quillIconsRegex,
use: [{
loader: 'html-loader',
options: {
minimize: true
}
}]
}]
}
}); Does it show the warning (experimental) when you run it? Does it work? B) Give me a working example for the failing quill setup A complete sample project with quill that shows the problems, so that I can reproduce and tell if my changes work for your use-case. |
@tpraxl PR looks very nice, I'm gonna give it a spin tomorrow. Great work, thank you! |
@tegola Just to avoid irritations: the PR is not merged yet. |
If anyone winds up here, I wanted to use the react-svg-loader to compile in my svg icons. This results in no image pop-in and since they're svg icons, adds little to the build. My solution was to clone the repo and customize the master rules builder. What would be extremely useful would be a component that could override the rules completely. Is this possible by writing a component? |
I also need to be able to not use Laravel Mix's built-in SVG handling. I was able to do so building upon First I did
It's the second rule that does the loading of SVGs along with images. To be able to remove the built-in SVG loading, but keep the image loading, I had to modify the regex to remove the SVG part. Based on @tegola's code, this is the code I wrote with which I was able to remove the built-in SVG loader so that I could use my own: const mix = require('laravel-mix');
// Do not use Laravel mix's built-in SVG loader.
Mix.listen('configReady', function(config) {
const rules = config.module.rules;
const svgRegexPart = '|^((?!font).)*\\.svg';
for (let rule of rules) {
if (rule.test) {
if (('' + rule.test).indexOf(svgRegexPart) > -1) {
// Recreate the RegExp with just the SVG part removed from
// the built-in mix RegExp for loading SVGs and images.
rule.test = new RegExp(('' + rule.test).replace(svgRegexPart, ''));
}
}
}
});
// ... Though note that after I did this to use a loader that turns SVGs into Vue components (vue-svg-loader), SVGs linked from CSS (e.g. for background-image) don't work anymore. |
I'm using Quill in a Vue component. To avoid loading everything from the distributable build, I have prepared a quill entry file (like this one).
When doing this, however, webpack moves the svg icons used by Quill theme in
/fonts/vendor/quill
and returns their path, instead of returning the svg content, as Quill expects. I end up with this:This doesn't happen when using the distributable build in the npm package.
Quill's build guide and related webpack example say that icons should be loaded with html loader:
https://github.com/quilljs/webpack-example/blob/master/webpack.conf.js#L39
Now to my question: how can I replace/override Laravel Mix's svg loader so it doesn't match Quill icon paths, and instead setup
html-loader
just for that path?Thanks
Edit: A past issue (closed unanswered) asks the same thing: #942.
The text was updated successfully, but these errors were encountered: