refactor: remove attributes.root option (#341)

BREAKING CHANGE: the `attributes.root` option was removed in favor `resolve.roots`

README.md

@@ -153,7 +153,6 @@ module.exports = {
 
               return true;
             },
-            root: '.',
           },
         },
       },
@@ -317,34 +316,6 @@ module.exports = {
 };
 ```
 
-#### `root`
-
-Type: `String`
-Default: `undefined`
-
-For urls that start with a `/`, the default behavior is to not translate them.
-If a `root` query parameter is set, however, it will be prepended to the url and then translated.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.html$/i,
-        loader: 'html-loader',
-        options: {
-          attributes: {
-            root: '.',
-          },
-        },
-      },
-    ],
-  },
-};
-```
-
 ### `preprocessor`
 
 Type: `Function`
@@ -544,6 +515,44 @@ module.exports = {
 
 ## Examples
 
+### roots
+
+With [`resolve.roots`](https://webpack.js.org/configuration/resolve/#resolveroots) can specify a list of directories where requests of server-relative URLs (starting with '/') are resolved.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  context: __dirname,
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+        options: {},
+      },
+      {
+        test: /\.jpg$/,
+        loader: 'file-loader',
+      },
+    ],
+  },
+  resolve: {
+    roots: [path.resolve(__dirname, 'fixtures')],
+  },
+};
+```
+
+**file.html**
+
+```html
+<img src="/image.jpg" />
+```
+
+```js
+// => image.jpg in __dirname/fixtures will be resolved
+```
+
 ### CDN
 
 **webpack.config.js**
@@ -662,32 +671,6 @@ module.exports = {
 };
 ```
 
-### 'Root-relative' URLs
-
-With the same configuration as in the CDN example:
-
-**file.html**
-
-```html
-<img src="/image.jpg" />
-```
-
-**scripts.js**
-
-```js
-require('html-loader!./file.html');
-
-// => '<img src="/image.jpg">'
-```
-
-**other-scripts.js**
-
-```js
-require('html-loader?{"attributes":{"root":"."}}!./file.html');
-
-// => '<img src="http://cdn.example.com/49eba9f/a992ca.jpg">'
-```
-
 ### Templating
 
 You can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/).

package.json

@@ -44,7 +44,6 @@
   },
   "dependencies": {
     "html-minifier-terser": "^5.1.1",
-    "loader-utils": "^2.0.0",
     "parse5-sax-parser": "^6.0.1"
   },
   "devDependencies": {

src/index.js

@@ -1,12 +1,11 @@
-import { stringifyRequest } from 'loader-utils';
-
 import { sourcePlugin, minimizerPlugin } from './plugins';
 import {
   pluginRunner,
   normalizeOptions,
   getImportCode,
   getModuleCode,
   getExportCode,
+  stringifyRequest,
 } from './utils';
 
 import schema from './options.json';
@@ -28,7 +27,8 @@ export default async function loader(content) {
   if (options.attributes) {
     plugins.push(
       sourcePlugin({
-        urlHandler: (url) => stringifyRequest(this, url),
+        urlHandler: (url) =>
+          url[0] === '/' ? `"${url}"` : stringifyRequest(this, url),
         attributes: options.attributes,
         resourcePath: this.resourcePath,
         imports,

src/options.json

@@ -54,9 +54,6 @@
             },
             "urlFilter": {
               "instanceof": "Function"
-            },
-            "root": {
-              "type": "string"
             }
           },
           "additionalProperties": false