Refactoring loaders into re-usable modules

weaverryan · weaverryan · commit d7df254b8690 · 2017-06-15T13:46:28.000-04:00
diff --git a/lib/config-generator.js b/lib/config-generator.js
@@ -14,14 +14,17 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('./webpack/webpack-manifest-plugin');
 const DeleteUnusedEntriesJSPlugin = require('./webpack/delete-unused-entries-js-plugin');
 const AssetOutputDisplayPlugin = require('./friendly-errors/asset-output-display-plugin');
-const loaderFeatures = require('./loader-features');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const WebpackChunkHash = require('webpack-chunk-hash');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 const missingLoaderTransformer = require('./friendly-errors/transformers/missing-loader');
 const missingLoaderFormatter = require('./friendly-errors/formatters/missing-loader');
 const missingPostCssConfigTransformer = require('./friendly-errors/transformers/missing-postcss-config');
 const missingPostCssConfigFormatter = require('./friendly-errors/formatters/missing-postcss-config');
+const cssLoaders = require('./loaders/css');
+const sassLoaders = require('./loaders/sass');
+const lessLoaders = require('./loaders/less');
+const babelLoaders = require('./loaders/babel');
 
 class ConfigGenerator {
     /**
@@ -98,76 +101,18 @@ class ConfigGenerator {
     }
 
     buildRulesConfig() {
-        const cssLoaders = [
+        let rules = [
             {
-                loader: 'css-loader' + this.getSourceMapOption() + (this.webpackConfig.isProduction() ? '?minimize=1' : ''),
+                // match .js and .jsx
+                test: /\.jsx?$/,
+                exclude: /(node_modules|bower_components)/,
+                use: babelLoaders(this.webpackConfig)
             },
-        ];
-        if (this.webpackConfig.usePostCssLoader) {
-            loaderFeatures.ensureLoaderPackagesExist('postcss');
-
-            cssLoaders.push({
-                loader: 'postcss-loader' + this.getSourceMapOption(),
-            });
-        }
-
-        let babelConfig = {
-            // improves performance by caching babel compiles
-            // we add this option ALWAYS
-            // https://github.com/babel/babel-loader#options
-            cacheDirectory: true
-        };
-
-        // configure babel (unless the user is specifying .babelrc)
-        // todo - add a sanity check for their babelrc contents
-        if (!this.webpackConfig.doesBabelRcFileExist()) {
-            Object.assign(babelConfig, {
-                presets: [
-                    ['env', {
-                        // modules don't need to be transformed - webpack will parse
-                        // the modules for us. This is a performance improvement
-                        // https://babeljs.io/docs/plugins/preset-env/#optionsmodules
-                        modules: false,
-                        targets: {
-                            browsers: '> 1%',
-                            uglify: true
-                        },
-                        useBuiltIns: true
-                    }]
-                ],
-            });
-
-            if (this.webpackConfig.useReact) {
-                loaderFeatures.ensureLoaderPackagesExist('react');
-
-                babelConfig.presets.push('react');
-            }
-
-            // allow for babel config to be controlled
-            this.webpackConfig.babelConfigurationCallback.apply(
-                // use babelConfig as the this variable
-                babelConfig,
-                [babelConfig]
-            );
-        }
-
-        let rules = [];
-        rules.push({
-            // match .js and .jsx
-            test: /\.jsx?$/,
-            exclude: /(node_modules|bower_components)/,
-            use: {
-                loader: 'babel-loader',
-                options: babelConfig
-            }
-        });
-
-        rules = rules.concat([
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: 'style-loader' + this.getSourceMapOption(),
-                    use: cssLoaders
+                    use: cssLoaders(this.webpackConfig)
                 })
             },
             {
@@ -186,51 +131,24 @@ class ConfigGenerator {
                     publicPath: this.webpackConfig.getRealPublicPath()
                 }
             },
-        ]);
+        ];
 
         if (this.webpackConfig.useSassLoader) {
-            loaderFeatures.ensureLoaderPackagesExist('sass');
-
-            const sassLoaders = [...cssLoaders];
-            if (true === this.webpackConfig.sassOptions.resolve_url_loader) {
-                // responsible for resolving SASS url() paths
-                // without this, all url() paths must be relative to the
-                // entry file, not the file that contains the url()
-                sassLoaders.push({
-                    loader: 'resolve-url-loader' + this.getSourceMapOption(),
-                });
-            }
-
-            sassLoaders.push({
-                loader: 'sass-loader',
-                options: {
-                    // needed by the resolve-url-loader
-                    sourceMap: (true === this.webpackConfig.sassOptions.resolve_url_loader) || this.webpackConfig.useSourceMaps
-                }
-            });
-
             rules.push({
                 test: /\.s[ac]ss$/,
                 use: ExtractTextPlugin.extract({
                     fallback: 'style-loader' + this.getSourceMapOption(),
-                    use: sassLoaders
+                    use: sassLoaders(this.webpackConfig)
                 })
             });
         }
 
         if (this.webpackConfig.useLessLoader) {
-            loaderFeatures.ensureLoaderPackagesExist('less');
-
             rules.push({
                 test: /\.less/,
                 use: ExtractTextPlugin.extract({
                     fallback: 'style-loader' + this.getSourceMapOption(),
-                    use: [
-                        ...cssLoaders,
-                        {
-                            loader: 'less-loader' + this.getSourceMapOption()
-                        },
-                    ]
+                    use: lessLoaders(this.webpackConfig)
                 })
             });
         }
diff --git a/lib/loaders/babel.js b/lib/loaders/babel.js
@@ -0,0 +1,65 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../loader-features');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for Babel
+ */
+module.exports = function(webpackConfig) {
+    let babelConfig = {
+        // improves performance by caching babel compiles
+        // we add this option ALWAYS
+        // https://github.com/babel/babel-loader#options
+        cacheDirectory: true
+    };
+
+    // configure babel (unless the user is specifying .babelrc)
+    // todo - add a sanity check for their babelrc contents
+    if (!webpackConfig.doesBabelRcFileExist()) {
+        Object.assign(babelConfig, {
+            presets: [
+                ['env', {
+                    // modules don't need to be transformed - webpack will parse
+                    // the modules for us. This is a performance improvement
+                    // https://babeljs.io/docs/plugins/preset-env/#optionsmodules
+                    modules: false,
+                    targets: {
+                        browsers: '> 1%',
+                        uglify: true
+                    },
+                    useBuiltIns: true
+                }]
+            ],
+        });
+
+        if (webpackConfig.useReact) {
+            loaderFeatures.ensureLoaderPackagesExist('react');
+
+            babelConfig.presets.push('react');
+        }
+
+        // allow for babel config to be controlled
+        webpackConfig.babelConfigurationCallback.apply(
+            // use babelConfig as the this variable
+            babelConfig,
+            [babelConfig]
+        );
+    }
+
+    return [
+        {
+            loader: 'babel-loader',
+            options: babelConfig
+        }
+    ];
+};
diff --git a/lib/loaders/css.js b/lib/loaders/css.js
@@ -0,0 +1,41 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../loader-features');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for CSS files
+ */
+module.exports = function(webpackConfig) {
+    const cssLoaders = [
+        {
+            loader: 'css-loader',
+            options: {
+                minimize: webpackConfig.isProduction(),
+                sourceMap: webpackConfig.useSourceMaps
+            }
+        },
+    ];
+
+    if (webpackConfig.usePostCssLoader) {
+        loaderFeatures.ensureLoaderPackagesExist('postcss');
+
+        cssLoaders.push({
+            loader: 'postcss-loader',
+            options: {
+                sourceMap: webpackConfig.useSourceMaps
+            }
+        });
+    }
+
+    return cssLoaders;
+};
diff --git a/lib/loaders/less.js b/lib/loaders/less.js
@@ -0,0 +1,31 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../loader-features');
+const cssLoaders = require('./css');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for Less files
+ */
+module.exports = function(webpackConfig) {
+    loaderFeatures.ensureLoaderPackagesExist('less');
+
+    return [
+        ...cssLoaders(webpackConfig),
+        {
+            loader: 'less-loader',
+            options: {
+                sourceMap: webpackConfig.useSourceMaps
+            }
+        },
+    ];
+};
diff --git a/lib/loaders/sass.js b/lib/loaders/sass.js
@@ -0,0 +1,44 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../loader-features');
+const cssLoaders = require('./css');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for Sass files
+ */
+module.exports = function(webpackConfig) {
+    loaderFeatures.ensureLoaderPackagesExist('sass');
+
+    const sassLoaders = [...cssLoaders(webpackConfig)];
+    if (true === webpackConfig.sassOptions.resolve_url_loader) {
+        // responsible for resolving SASS url() paths
+        // without this, all url() paths must be relative to the
+        // entry file, not the file that contains the url()
+        sassLoaders.push({
+            loader: 'resolve-url-loader',
+            options: {
+                sourceMap: webpackConfig.useSourceMaps
+            }
+        });
+    }
+
+    sassLoaders.push({
+        loader: 'sass-loader',
+        options: {
+            // needed by the resolve-url-loader
+            sourceMap: (true === webpackConfig.sassOptions.resolve_url_loader) || webpackConfig.useSourceMaps
+        }
+    });
+
+    return sassLoaders;
+};
diff --git a/test/config-generator.js b/test/config-generator.js
@@ -360,7 +360,7 @@ describe('The config-generator function', () => {
             const jsRule = findRule(/\.jsx?$/, actualConfig.module.rules);
 
             // check for the default env preset only
-            expect(JSON.stringify(jsRule.use.options.presets)).contains('env');
+            expect(JSON.stringify(jsRule.use[0].options.presets)).contains('env');
         });
 
         it('If .babelrc is present, we pass *no* config', () => {
@@ -376,7 +376,7 @@ describe('The config-generator function', () => {
             const jsRule = findRule(/\.jsx?$/, actualConfig.module.rules);
 
             // the options should only contain the cacheDirectory option
-            expect(JSON.stringify(jsRule.use.options)).to.equal(JSON.stringify({ 'cacheDirectory': true }));
+            expect(JSON.stringify(jsRule.use[0].options)).to.equal(JSON.stringify({ 'cacheDirectory': true }));
         });
 
         it('configureBabel() passes babel options', () => {
@@ -392,7 +392,7 @@ describe('The config-generator function', () => {
 
             const jsRule = findRule(/\.jsx?$/, actualConfig.module.rules);
 
-            expect(jsRule.use.options.presets).to.include('foo');
+            expect(jsRule.use[0].options.presets).to.include('foo');
         });
 
         it('enableReactPreset() passes react preset to babel', () => {
@@ -409,9 +409,9 @@ describe('The config-generator function', () => {
 
             const jsRule = findRule(/\.jsx?$/, actualConfig.module.rules);
 
-            expect(jsRule.use.options.presets).to.include('react');
+            expect(jsRule.use[0].options.presets).to.include('react');
             // foo is also still there, not overridden
-            expect(jsRule.use.options.presets).to.include('foo');
+            expect(jsRule.use[0].options.presets).to.include('foo');
         });
     });
 
