Minimal changes necessary for Webpack 5 compatibility (#401)

Author: Judahmeek

CHANGELOG.md

@@ -5,6 +5,8 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
 
 ## [Unreleased]
 *Please add entries here for your pull requests.*
+#### Fixed
+- Now compatible with Webpack 5. Removed relative bootstraprc paths & addition of `sourceMap` to `sass-loader` querystring [PR 401](https://github.com/shakacode/bootstrap-loader/pull/401) by [judahmeek](https://github.com/judahmeek).
 
 ## [3.0.3] - 2019-03-27
 #### Fixed

node_package/tests/utils/processStyleLoaders.test.js

@@ -8,13 +8,6 @@ test('processStyleLoaders throws an error if given parameter is not an array', a
   assert.end();
 });
 
-test('processStyleLoaders throws an error if given array does not include "sass"', assert => {
-  assert.throws(() => {
-    processStyleLoaders({ loaders: ['url'] });
-  }, /can't find 'sass-loader'./);
-  assert.end();
-});
-
 test('processStyleLoaders works as expected', assert => {
   assert.deepEquals(
     processStyleLoaders({
@@ -27,7 +20,7 @@ test('processStyleLoaders works as expected', assert => {
     processStyleLoaders({
       loaders: ['other', 'sass'],
     }),
-    ['other', 'resolve-url-loader', 'sass-loader?sourceMap'],
+    ['other', 'resolve-url-loader', 'sass-loader'],
   );
   assert.deepEquals(
     processStyleLoaders({
@@ -41,7 +34,7 @@ test('processStyleLoaders works as expected', assert => {
       loaders: ['other', 'sass'],
       disableResolveUrlLoader: true,
     }),
-    ['other', 'sass-loader?sourceMap'],
+    ['other', 'sass-loader'],
   );
   assert.deepEquals(
     processStyleLoaders({
@@ -56,7 +49,7 @@ test('processStyleLoaders works as expected', assert => {
     processStyleLoaders({
       loaders: ['other', 'sass?other'],
     }),
-    ['other', 'resolve-url-loader', 'sass-loader?other&sourceMap'],
+    ['other', 'resolve-url-loader', 'sass-loader?other'],
   );
   assert.deepEquals(
     processStyleLoaders({
@@ -70,7 +63,7 @@ test('processStyleLoaders works as expected', assert => {
       loaders: ['other', 'sass?other'],
       disableResolveUrlLoader: true,
     }),
-    ['other', 'sass-loader?other&sourceMap'],
+    ['other', 'sass-loader?other'],
   );
   assert.deepEquals(
     processStyleLoaders({
@@ -92,13 +85,13 @@ test('processStyleLoaders works as expected', assert => {
     processStyleLoaders({
       loaders: ['sass', 'sass-resources'],
     }),
-    ['resolve-url-loader', 'sass-loader?sourceMap', 'sass-resources'],
+    ['resolve-url-loader', 'sass-loader', 'sass-resources'],
   );
   assert.deepEquals(
     processStyleLoaders({
       loaders: ['sass-loader', 'sass-resources-loader'],
     }),
-    ['resolve-url-loader', 'sass-loader?sourceMap', 'sass-resources-loader'],
+    ['resolve-url-loader', 'sass-loader', 'sass-resources-loader'],
   );
   assert.end();
 });

package.json

@@ -39,10 +39,11 @@
     "css-loader": "*",
     "mini-css-extract-plugin": ">=0.4.0",
     "node-sass": "*",
+    "sass": "*",
     "resolve-url-loader": "*",
     "sass-loader": "*",
     "url-loader": "*",
-    "webpack": ">=4.0.0"
+    "webpack": ">=5.0.0"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -70,6 +71,6 @@
     "prettier": "1.12.1",
     "tap-spec": "^4.1.2",
     "tape": "4.9.0",
-    "webpack": "4.8.1"
+    "webpack": "^5"
   }
 }

src/bootstrap.scripts.loader.js

@@ -14,9 +14,9 @@ module.exports = function() {
   logger.debug('Scripts input config:', '\n', this.query);
 
   const config = loaderUtils.getOptions(this) || {};
-  const { scripts, bootstrapVersion, bootstrapRelPath } = config;
+  const { scripts, bootstrapVersion, bootstrapPath } = config;
 
-  const processedScripts = processModules(scripts, bootstrapVersion, bootstrapRelPath, true);
+  const processedScripts = processModules(scripts, bootstrapVersion, bootstrapPath, true);
 
   const scriptsOutput = processedScripts.map(script => `${script}\n`).join('');
 

src/bootstrap.styles.loader.js

@@ -20,7 +20,7 @@ module.exports = function() {
   const bootstrapVersion = parseInt(config.bootstrapVersion, 10);
   const {
     styles,
-    bootstrapRelPath,
+    bootstrapPath,
     useCustomIconFontPath,
     preBootstrapCustomizations,
     bootstrapCustomizations,
@@ -30,28 +30,28 @@ module.exports = function() {
   const processedStyles = [];
 
   if (styles.indexOf('mixins') > -1) {
-    processedStyles.push(createBootstrapImport('mixins', bootstrapVersion, bootstrapRelPath));
+    processedStyles.push(createBootstrapImport('mixins', bootstrapVersion, bootstrapPath));
   }
 
   if (preBootstrapCustomizations) {
     processedStyles.push(createUserImport(preBootstrapCustomizations, this));
   }
 
   if (bootstrapVersion === 4) {
-    processedStyles.push(createBootstrapImport('functions', bootstrapVersion, bootstrapRelPath));
+    processedStyles.push(createBootstrapImport('functions', bootstrapVersion, bootstrapPath));
   }
 
-  processedStyles.push(createBootstrapImport('variables', bootstrapVersion, bootstrapRelPath));
+  processedStyles.push(createBootstrapImport('variables', bootstrapVersion, bootstrapPath));
 
   if (bootstrapVersion === 3 && !useCustomIconFontPath) {
-    processedStyles.push(`$icon-font-path: "${getFontsPath(bootstrapRelPath, this)}";`);
+    processedStyles.push(`$icon-font-path: "${getFontsPath(bootstrapPath, this)}";`);
   }
 
   if (bootstrapCustomizations) {
     processedStyles.push(createUserImport(bootstrapCustomizations, this));
   }
 
-  const bootstrapStyles = processModules(styles, bootstrapVersion, bootstrapRelPath);
+  const bootstrapStyles = processModules(styles, bootstrapVersion, bootstrapPath);
   const userStyles = appStyles ? createUserImport(appStyles, this) : '';
 
   const stylesOutput = processedStyles

src/utils/getFontsPath.js

@@ -3,7 +3,7 @@ import path from 'path';
 /**
  * Builds path to Bootstrap fonts
  *
- * @param {string} bootstrapRelPath
+ * @param {string} bootstrapPath
  * @returns {string}
  */
-export default bootstrapRelPath => path.join(bootstrapRelPath, 'assets', 'fonts', 'bootstrap/');
+export default bootstrapPath => path.join(bootstrapPath, 'assets', 'fonts', 'bootstrap/');

src/utils/processStyleLoaders.js

@@ -41,31 +41,6 @@ Default is ['style', 'css', 'sass']
   const sassLoader = loadersWithSuffix.find(loader => sassLoaderRegExp.test(loader));
   const sassLoaderIndex = loadersWithSuffix.indexOf(sassLoader);
 
-  if (!disableSassSourceMap) {
-    if (!sassLoader) {
-      throw new Error(`
-        I can't find 'sass-loader'.
-        Add it to array of loaders in .bootstraprc.
-      `);
-    }
-
-    const sassLoaderQuery = sassLoader.split('?')[1];
-
-    // We need to check if user's loader already contains sourceMap param
-    // And if it's not there - inject it
-    let sassLoaderWithSourceMap;
-    if (sassLoaderQuery) {
-      sassLoaderWithSourceMap = sassLoaderQuery.includes('sourceMap')
-        ? sassLoader
-        : `${sassLoader}&sourceMap`;
-    } else {
-      sassLoaderWithSourceMap = `${sassLoader}?sourceMap`;
-    }
-
-    // eslint-disable-next-line no-param-reassign
-    loadersWithSuffix[sassLoaderIndex] = sassLoaderWithSourceMap;
-  }
-
   if (!disableResolveUrlLoader) {
     const resolveUrlLoaderRegExp = getLoaderRegExp('resolve-url');
     const resolveUrlLoader = loadersWithSuffix.find(loader => resolveUrlLoaderRegExp.test(loader));