Move imports-loader back to dependencies. Make loaders usage more exp…

…licit [publish]

package.json

@@ -114,7 +114,6 @@
     "glob": "^7.1.6",
     "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^0.8.0",
     "jest": "^24.9.0",
     "jest-teamcity": "^1.6.0",
     "karma": "^4.4.1",
@@ -178,6 +177,7 @@
     "focus-visible": "^5.0.2",
     "highlight.js": "^9.17.0",
     "html-loader": "^0.5.5",
+    "imports-loader": "^0.8.0",
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^1.1.0",
     "moment": "^2.24.0",

webpack.config.js

@@ -2,17 +2,13 @@ const path = require('path');
 
 const componentsPath = [path.join(__dirname, 'components')];
 
-function resolveLoader(loader) {
-  return require.resolve(`${loader}-loader`);
-}
-
 function loadersObjectToArray(loaders) {
   return Object.keys(loaders).map(name => loaders[name]);
 }
 
 const svgInlineLoader = {
   test: /\.svg$/,
-  loader: resolveLoader('svg-inline'),
+  loader: require.resolve('svg-inline-loader'),
   options: {removeSVGTagAttrs: false},
   include: [require('@jetbrains/icons')]
 };
@@ -31,21 +27,21 @@ const svgSpriteLoaderBackwardCompatibilityHack = {
 
 const svgLoader = {
   test: /\.svg$/,
-  loader: `${resolveLoader('url')}?limit=10000`,
+  loader: `${require.resolve('url-loader')}?limit=10000`,
   include: componentsPath
 };
 
 const scssLoader = {
   test: /\.scss$/,
   include: componentsPath,
   use: [
-    resolveLoader('style'),
-    resolveLoader('css'),
+    require.resolve('style-loader'),
+    require.resolve('css-loader'),
     {
-      loader: resolveLoader('postcss')
+      loader: require.resolve('postcss-loader')
     },
     {
-      loader: `${resolveLoader('sass')}?outputStyle=expanded`,
+      loader: `${require.resolve('sass-loader')}?outputStyle=expanded`,
       options: {
         implementation: require('sass') // Dart implementation of SASS compiler
       }
@@ -57,9 +53,9 @@ const cssLoader = {
   test: /\.css$/,
   include: componentsPath,
   use: [
-    resolveLoader('style'),
+    require.resolve('style-loader'),
     {
-      loader: resolveLoader('css'),
+      loader: require.resolve('css-loader'),
       options: {
         modules: {
           localIdentName: '[local]_[hash:3]'
@@ -68,7 +64,7 @@ const cssLoader = {
       }
     },
     {
-      loader: resolveLoader('postcss')
+      loader: require.resolve('postcss-loader')
     }
   ]
 };
@@ -79,15 +75,15 @@ const externalCssLoader = {
     path.dirname(require.resolve('highlight.js/package.json'))
   ],
   use: [
-    resolveLoader('style'),
-    resolveLoader('css')
+    require.resolve('style-loader'),
+    require.resolve('css-loader')
   ]
 };
 
 const babelLoader = {
   test: /\.js$/,
   include: componentsPath,
-  loader: resolveLoader('babel'),
+  loader: require.resolve('babel-loader'),
   options: {
     configFile: path.join(__dirname, 'babel.config.js'),
     cacheDirectory: true
@@ -96,13 +92,13 @@ const babelLoader = {
 
 const whatwgLoader = {
   test: require.resolve('whatwg-fetch'),
-  loader: resolveLoader('imports')
+  loader: require.resolve('imports-loader')
 };
 
 const htmlLoader = {
   test: /-ng(\\|\/)\S*(-ng|-ng__)\S*\.html$/,
   include: componentsPath,
-  loader: resolveLoader('html'),
+  loader: require.resolve('html-loader'),
   query: {
     collapseBooleanAttributes: false
   }
@@ -111,7 +107,7 @@ const htmlLoader = {
 const gifLoader = {
   test: /\.gif$/,
   include: componentsPath,
-  loader: resolveLoader('url')
+  loader: require.resolve('url-loader')
 };
 
 const loaders = {