feature #103 Allow to disable the default image and font loaders (Lyrkan)

This PR was squashed before being merged into the master branch (closes #103).

Discussion
----------

Allow to disable the default image and font loaders

This PR adds a `disableAssetsLoaders` method to the API, allowing users to disable the default image and font loaders.

Currently these two loaders are always added (with some parts of them being hardcoded) and can't really be overriden which can causes some issues (see #73).

By allowing to disable this behavior, users would be able to replace them by their own loaders.

About the new method:

* **Why a `disableAssetsLoaders` and not an `enableAssetsLoaders` instead**: I still think that these two loaders should be added by default since almost every project will need them. Moreover, keeping them enabled will avoid breaking BC.

* **Why a single method instead of one for the image loader and one for the fonts loader**: I may be wrong there, but I think that if an user disable one of them, it'll probably disable the other one aswell anyway.

Commits
-------

aeb4a95 Allow to disable the default image and font loaders

Author: weaverryan

index.js

@@ -429,6 +429,30 @@ module.exports = {
         return this;
     },
 
+    /**
+     * Call this if you wish to disable the default
+     * images loader.
+     *
+     * @returns {exports}
+     */
+    disableImagesLoader() {
+        webpackConfig.disableImagesLoader();
+
+        return this;
+    },
+
+    /**
+     * Call this if you wish to disable the default
+     * fonts loader.
+     *
+     * @returns {exports}
+     */
+    disableFontsLoader() {
+        webpackConfig.disableFontsLoader();
+
+        return this;
+    },
+
     /**
      * If enabled, the output directory is emptied between
      * each build (to remove old files).

lib/WebpackConfig.js

@@ -59,6 +59,8 @@ class WebpackConfig {
         this.tsConfigurationCallback = function() {};
         this.useForkedTypeScriptTypeChecking = false;
         this.forkedTypeScriptTypesCheckOptionsCallback = () => {};
+        this.useImagesLoader = true;
+        this.useFontsLoader = true;
     }
 
     getContext() {
@@ -268,6 +270,14 @@ class WebpackConfig {
         this.vueLoaderOptionsCallback = vueLoaderOptionsCallback;
     }
 
+    disableImagesLoader() {
+        this.useImagesLoader = false;
+    }
+
+    disableFontsLoader() {
+        this.useFontsLoader = false;
+    }
+
     cleanupOutputBeforeBuild() {
         this.cleanupOutput = true;
     }

lib/config-generator.js

@@ -122,24 +122,30 @@ class ConfigGenerator {
             {
                 test: /\.css$/,
                 use: extractText.extract(this.webpackConfig, cssLoaderUtil.getLoaders(this.webpackConfig, false))
-            },
-            {
+            }
+        ];
+
+        if (this.webpackConfig.useImagesLoader) {
+            rules.push({
                 test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
                 loader: 'file-loader',
                 options: {
                     name: 'images/[name].[hash:8].[ext]',
                     publicPath: this.webpackConfig.getRealPublicPath()
                 }
-            },
-            {
+            });
+        }
+
+        if (this.webpackConfig.useFontsLoader) {
+            rules.push({
                 test: /\.(woff|woff2|ttf|eot|otf)$/,
                 loader: 'file-loader',
                 options: {
                     name: 'fonts/[name].[hash:8].[ext]',
                     publicPath: this.webpackConfig.getRealPublicPath()
                 }
-            },
-        ];
+            });
+        }
 
         if (this.webpackConfig.useSassLoader) {
             rules.push({

test/WebpackConfig.js

@@ -417,4 +417,22 @@ describe('WebpackConfig object', () => {
             expect(config.loaders).to.deep.equals([{ 'test': /\.custom$/, 'loader': 'custom-loader' }]);
         });
     });
+
+    describe('disableImagesLoader', () => {
+        it('Disable default images loader', () => {
+            const config = createConfig();
+            config.disableImagesLoader();
+
+            expect(config.useImagesLoader).to.be.false;
+        });
+    });
+
+    describe('disableFontsLoader', () => {
+        it('Disable default fonts loader', () => {
+            const config = createConfig();
+            config.disableFontsLoader();
+
+            expect(config.useFontsLoader).to.be.false;
+        });
+    });
 });

test/config-generator.js

@@ -416,4 +416,64 @@ describe('The config-generator function', () => {
             expect(ignorePlugin).to.not.be.undefined;
         });
     });
+
+    describe('disableImagesLoader() removes the default images loader', () => {
+        it('without disableImagesLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            // do not call disableImagesLoader
+
+            const actualConfig = configGenerator(config);
+
+            expect(function() {
+                findRule(/\.(png|jpg|jpeg|gif|ico|svg)$/, actualConfig.module.rules);
+            }).to.not.throw();
+        });
+
+        it('with disableImagesLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            config.disableImagesLoader();
+
+            const actualConfig = configGenerator(config);
+
+            expect(function() {
+                findRule(/\.(png|jpg|jpeg|gif|ico|svg)$/, actualConfig.module.rules);
+            }).to.throw();
+        });
+    });
+
+    describe('disableFontsLoader() removes the default fonts loader', () => {
+        it('without disableFontsLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            // do not call disableFontsLoader
+
+            const actualConfig = configGenerator(config);
+
+            expect(function() {
+                findRule(/\.(woff|woff2|ttf|eot|otf)$/, actualConfig.module.rules);
+            }).to.not.throw();
+        });
+
+        it('with disableFontsLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            config.disableFontsLoader();
+
+            const actualConfig = configGenerator(config);
+
+            expect(function() {
+                findRule(/\.(woff|woff2|ttf|eot|otf)$/, actualConfig.module.rules);
+            }).to.throw();
+        });
+    });
 });

test/index.js

@@ -204,6 +204,24 @@ describe('Public API', () => {
 
     });
 
+    describe('disableImagesLoader', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.disableImagesLoader();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
+    describe('disableFontsLoader', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.disableFontsLoader();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('cleanupOutputBeforeBuild', () => {
 
         it('must return the API object', () => {