feat: support script:src attributes

webpack-contrib · Mar 2, 2020 · 3df909d · 3df909d
1 parent 1a20a19
commit 3df909d
Show file tree

Hide file tree

Showing 10 changed files with 742 additions and 457 deletions.
diff --git a/README.md b/README.md
@@ -53,18 +53,18 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 ## Options
 
-|               Name                |        Type         |                                                        Default                                                        | Description                              |
-| :-------------------------------: | :-----------------: | :-------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
-|  **[`attributes`](#attributes)**  | `{Boolean\/Array}`  | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data']` | Enables/Disables attributes handling     |
-|        **[`root`](#root)**        |     `{String}`      |                                                      `undefiend`                                                      | Allow to handle root-relative attributes |
-| **[`interpolate`](#interpolate)** |     `{Boolean}`     |                                                        `false`                                                        | Allow to use expressions in HTML syntax  |
-|    **[`minimize`](#minimize)**    | `{Boolean\|Object}` |                                     `true` in production mode, otherwise `false`                                      | Tell `html-loader` to minimize HTML      |
-|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                                                        `false`                                                        | Use ES modules syntax                    |
+|               Name                |        Type         |                                                               Default                                                               | Description                              |
+| :-------------------------------: | :-----------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------- |
+|  **[`attributes`](#attributes)**  | `{Boolean\/Array}`  | `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src','input:src', 'object:data', 'script:src']` | Enables/Disables attributes handling     |
+|        **[`root`](#root)**        |     `{String}`      |                                                             `undefiend`                                                             | Allow to handle root-relative attributes |
+| **[`interpolate`](#interpolate)** |     `{Boolean}`     |                                                               `false`                                                               | Allow to use expressions in HTML syntax  |
+|    **[`minimize`](#minimize)**    | `{Boolean\|Object}` |                                            `true` in production mode, otherwise `false`                                             | Tell `html-loader` to minimize HTML      |
+|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                                                               `false`                                                               | Use ES modules syntax                    |
 
 ### `attributes`
 
 Type: `Boolean|Array`
-Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data']`
+Default: `[':srcset', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']`
 
 #### `Boolean`
 
@@ -331,6 +331,70 @@ require('html-loader?-attributes!./file.html');
 data-src=data:image/png;base64,...>'
 ```
 
+### Process `script` and `link` tags
+
+**script.file.js**
+
+```js
+console.log(document);
+```
+
+**style.file.css**
+
+```css
+a {
+  color: red;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Title of the document</title>
+    <link rel="stylesheet" type="text/css" href="./style.file.css" />
+  </head>
+  <body>
+    Content of the document......
+    <script src="./script.file.js"></script>
+  </body>
+</html>
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
+      },
+      {
+        test: /\.js$/i,
+        exclude: /\.file.js$/i,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.file.js$/i,
+        loader: 'file-loader',
+      },
+      {
+        test: /\.css$/i,
+        exclude: /\.file.css$/i,
+        loader: 'css-loader',
+      },
+      {
+        test: /\.file.css$/i,
+        loader: 'file-loader',
+      },
+    ],
+  },
+};
+```
+
 ### 'Root-relative' URLs
 
 With the same configuration as above:

diff --git a/src/plugins/attribute-plugin.js b/src/plugins/attribute-plugin.js
@@ -440,6 +440,7 @@ export default (options) =>
             'source:src',
             'input:src',
             'object:data',
+            'script:src',
           ]
         : options.attributes;
 

diff --git a/test/__snapshots__/attributes-option.test.js.snap b/test/__snapshots__/attributes-option.test.js.snap
diff --git a/test/__snapshots__/esModule-option.test.js.snap b/test/__snapshots__/esModule-option.test.js.snap
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
diff --git a/test/__snapshots__/minimize-option.test.js.snap b/test/__snapshots__/minimize-option.test.js.snap
diff --git a/test/__snapshots__/root-option.test.js.snap b/test/__snapshots__/root-option.test.js.snap
diff --git a/test/fixtures/script.file.js b/test/fixtures/script.file.js
@@ -0,0 +1,5 @@
+function foo(arg) {
+  return arg;
+}
+
+foo(1);
diff --git a/test/fixtures/simple.html b/test/fixtures/simple.html
@@ -43,7 +43,7 @@ <h2>An Ordered HTML List</h2>
 <img SRC="image.png">
 <IMG SRC="image.png">
 
-<script src="script.js"></script>
+<script src="./script.file.js"></script>
 
 <custom-element custom-src="image.png" />
 <custom-img custom-src="image.png"/></custom-element>
@@ -104,7 +104,7 @@ <h2>An Ordered HTML List</h2>
   <input type="image" src="image.png" alt="Submit">
 </form>
 
-<script src="script.js"></script>
+<script src="https://domain.org/script.js"></script>
 
 <audio controls>
   <source src="example.ogg" type="audio/ogg">
@@ -134,7 +134,16 @@ <h2>An Ordered HTML List</h2>
 
 <![CDATA[<img src="image.png">]]><img src="image.png">
 
-<link type="stylesheet" href="style.css">
+<link rel="stylesheet" type="text/css" href="./style.css">
+<link rel="icon" href="./image.png" sizes="16x16">
+<link rel="apple-touch-icon" href="./image.png">
+<link rel="apple-touch-startup-image" href="./image.png">
+<link rel="shortlink" type="text/html" href="http://flic.kr/p/6XuLyD">
+<link type="text/css" href="./style.css">
+<link rel="pingback" href="http://bob.example.net/xmlrpcserver">
+<a rel="author" href="./simple.html">link text</a>
+
+<a href="tel:1-408-555-5555">Call me</a>
 
 <!----><img src="image.png">-->
 <!--><img src="image.png">-->

diff --git a/test/helpers/getCompiler.js b/test/helpers/getCompiler.js
@@ -32,6 +32,24 @@ export default (fixture, loaderOptions = {}, config = {}) => {
           loader: 'file-loader',
           options: { name: '[name].[ext]' },
         },
+        {
+          test: /\.file.css$/i,
+          rules: [
+            {
+              loader: 'file-loader',
+              options: { name: '[name].[ext]' },
+            },
+          ],
+        },
+        {
+          test: /\.file.js$/i,
+          rules: [
+            {
+              loader: 'file-loader',
+              options: { name: '[name].[ext]' },
+            },
+          ],
+        },
       ],
     },
     resolve: {