feat: add 'noAssetMatch' option, 'inline-bundle' -> 'inline-asset'

KyLeoHC · KyLeoHC · commit 3ba4a6a3cff2 · 2019-03-01T09:48:52.000+08:00
diff --git a/README.md b/README.md
@@ -26,63 +26,37 @@ $ npm i inline-source-webpack-plugin -D
     <div class="container">
       <h1>hello world!</h1>
     </div>
-    <!-- 'inline-bundle' attribute tell us to embed file that generated by webpack -->
-    <script inline inline-bundle="bundle\.\w+\.js$" inline-bundle-delete></script>
+    <!-- 'inline-asset' attribute tell us to embed file that generated by webpack -->
+    <script inline inline-asset="runtime\.\w+\.js$" inline-asset-delete></script>
+    <script inline inline-asset="bundle\.\w+\.js$" inline-asset-delete></script>
   </body>
 </html>
 ```
 
-```js
-/* ./demo/src/inline.js */
-function Person() {
-}
+You can find this demo in the demo directory and view the output:
 
-Person.prototype.sayHello = function () {
-  var word = 'hello';
-  console.log(word);
-};
-```
+```bash
+# install dependency
+npm i
 
-```js
-/* ./demo/src/bundle.js */
-console.log('This file is build by webpack.But InlineSourceWebpackPlugin will embed it into html file.');
-```
+# enter the demo directory
+cd demo
 
-```css
-/* ./demo/src/inline.css */
-.container {
-  border: 1px solid #000;
-}
+# build
+npm run build
 ```
 
-Output:
-
-```html
-<!-- ./demo/dist/index.html -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>test</title>
-    <style>.container{border:1px solid #ff2c58}</style>
-    <script>function Person(){}Person.prototype.sayHello=function(){console.log("[inline]:","hello world!")},(new Person).sayHello();</script>
-  </head>
-  <body>
-    <div class="container">
-      <h1>hello world!</h1>
-    </div>
-    <!-- 'inline-bundle' attribute tell us to embed file that generated by webpack -->
-    <script>(window.webpackJsonp=window.webpackJsonp||[]).push([["bundle"],[,function(i,e){console.log("This file is build by webpack.But InlineSourceWebpackPlugin will embed it into html file.")}],[[1,"runtime"]]]);</script>
-  <script type="text/javascript" src="/inline-source-webpack-plugin/demo/dist/runtime.ee77f51ffadaa60b61bb.js"></script><script type="text/javascript" src="/inline-source-webpack-plugin/demo/dist/index.52decaca808fa7663ddf.js"></script></body>
-</html>
-```
+## Usage
 
-note: You can find this demo in the demo directory.
+Available options include(refer to [this](https://github.com/popeindustries/inline-source#usage) for more options):
 
-## Usage
-Available `options` include(refer to [this](https://github.com/popeindustries/inline-source#usage) for more options):
 - `compress`: enable/disable compression.(default `false`)
 - `rootpath`: path used for resolving inlineable paths.
+- `noAssetMatchReplace`: work with `noAssetMatch` option.(default `<!-- -->`)
+- `noAssetMatch`: define the behaviour while no asset match the value of `inline-asset` attribute.(default `1`)
+  - `0`: do nothing and the tag is still reserved in the html.
+  - `1`: throw warning tips and replace the tag with the content of `noAssetMatchReplace` option.
+  - `2`: throw error tips and replace the tag with the content of `noAssetMatchReplace` option(This level will affect the compilation of webpack).
 
 ```javascript
 // webpack.config.js
@@ -103,14 +77,14 @@ module.exports = {
 };
 ```
 
-If you want to embed the files that generated by webpack or other plugin, you can use `inline-bundle` attribute to filter the files(Please don't try to use `src` or `href`).
-Add `inline-bundle-delete` attribute for deleting the bundle after inline task.
+If you want to embed the files that generated by webpack or other plugin, you can use `inline-asset` attribute to filter the files(Please don't try to use `src` or `href`).
+Add `inline-asset-delete` attribute for deleting the asset after inline task.
 
 ```html
-<script inline inline-bundle-delete inline-bundle="Your bundle path/Your bundle name"></script>
+<script inline inline-asset-delete inline-asset="Your asset path/Your asset name"></script>
 ```
 
-The value of `inline-bundle` attribute is a *regular expression*.
+The value of `inline-asset` attribute is a *regular expression*.
 
 ## License
 
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -10,8 +10,8 @@
     <div class="container">
       <h1>hello world!</h1>
     </div>
-    <!-- 'inline-bundle' attribute tell us to embed file that generated by webpack -->
-    <script inline inline-bundle="runtime\.\w+\.js$" inline-bundle-delete></script>
-    <script inline inline-bundle="bundle\.\w+\.js$" inline-bundle-delete></script>
+    <!-- 'inline-asset' attribute tell us to embed file that generated by webpack -->
+    <script inline inline-asset="runtime\.\w+\.js$" inline-asset-delete></script>
+    <script inline inline-asset="bundle\.\w+\.js$" inline-asset-delete></script>
   </body>
 </html>
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -25,7 +25,8 @@ module.exports = {
     }),
     new InlineSourceWebpackPlugin({
       compress: true,
-      rootpath: './src'
+      rootpath: './src',
+      noAssetMatch: 1
     })
   ],
   mode: 'production'
diff --git a/index.js b/index.js
@@ -19,19 +19,22 @@ class InlineSourceWebpackPlugin {
    * @private
    */
   _process(compilation, data, cb) {
-    const options = Object.assign({}, this.options);
+    const options = Object.assign({
+      noAssetMatch: 1,
+      noAssetMatchReplace: `<!-- -->`
+    }, this.options);
     options.handlers = (source, context) => {
-      const bundle = source.props.bundle;
-      if (bundle) {
-        const regExp = new RegExp(bundle);
+      const asset = source.props.asset;
+      if (asset) {
+        const regExp = new RegExp(asset);
         for (let name in compilation.assets) {
           if (regExp.test(name)) {
             source.content = compilation.assets[name].source();
             if (source.type === 'css') {
               // change tag type
               source.tag = 'style';
             }
-            if (source.props['bundle-delete']) {
+            if (source.props['asset-delete']) {
               // mark the asset that need to delete
               this.deleteAssets.push({
                 name,
@@ -41,9 +44,24 @@ class InlineSourceWebpackPlugin {
             break;
           }
         }
+        if (!source.content) {
+          const noAssetMatchError = new Error(`[${this.constructor.name}]: no assets match '${asset}'.`);
+          switch (options.noAssetMatch) {
+            case 0:
+              break;
+            case 1:
+              compilation.warnings.push(noAssetMatchError);
+              source.replace = options.noAssetMatchReplace;
+              break;
+            case 2:
+              compilation.errors.push(noAssetMatchError);
+              source.replace = options.noAssetMatchReplace;
+              break;
+          }
+        }
       }
       if (source.filepath) {
-        // watch inline target
+        // watch inline file
         if (compilation.fileDependencies.add) {
           compilation.fileDependencies.add(source.filepath);
         } else {
@@ -82,8 +100,8 @@ class InlineSourceWebpackPlugin {
         if (error) throw error;
         const attributes = dom[0].attribs;
         const url = attributes.href || attributes.src;
-        needDelete = this.deleteAssets.some(bundle => {
-          return bundle.regExp.test(url);
+        needDelete = this.deleteAssets.some(asset => {
+          return asset.regExp.test(url);
         });
       })
     );
@@ -101,7 +119,7 @@ class InlineSourceWebpackPlugin {
    */
   _deleteAsset(compilation) {
     if (this.deleteAssets.length) {
-      this.deleteAssets.forEach(bundle => delete compilation.assets[bundle.name]);
+      this.deleteAssets.forEach(asset => delete compilation.assets[asset.name]);
     }
     this.deleteAssets = [];
   }
