update:User plugin handle inject css

Author: hiyangguo

HtmlWebpackHandleCssInjectPlugin.js

@@ -0,0 +1,35 @@
+class HtmlWebpackHandleCssInjectPlugin {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    const handleHtmlWebpackPluginAfterHtmlProcessing = (data) => {
+      const { filter } = this.options;
+      if (!filter) {
+        return;
+      }
+      data.html = data.html.replace(/<link .+?>(?=(?:<.+?>)*<\/head>)/g, (link) => {
+        const filePath = link.match(/(href=")(.*)" /)[2];
+        return filter(filePath, link) ? link : '';
+      });
+      return new Promise((resolve) => {
+        resolve(data);
+      });
+    };
+
+    if (compiler.hooks) {
+      // webpack 4 support
+      compiler.hooks.compilation.tap('htmlWebpackPluginAfterHtmlProcessing', (compilation) => {
+        compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapPromise('htmlWebpackPluginAfterHtmlProcessing', handleHtmlWebpackPluginAfterHtmlProcessing);
+      });
+    } else {
+      // Hook into the html-webpack-plugin processing
+      compiler.plugin('compilation', (compilation) => {
+        compilation.plugin('html-webpack-plugin-after-html-processing', handleHtmlWebpackPluginAfterHtmlProcessing);
+      });
+    }
+  }
+}
+
+module.exports = HtmlWebpackHandleCssInjectPlugin;

webpack.config.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlwebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackHandleCssInjectPlugin = require('./HtmlWebpackHandleCssInjectPlugin');
 
 const { STYLE_DEBUG } = process.env;
 // 主题路径
@@ -88,6 +89,11 @@ module.exports = {
       title: 'webpack 多主题打包演示',
       template: 'src/index.html',
       inject: true
+    }),
+    new HtmlWebpackHandleCssInjectPlugin({
+      filter: (filePath) => {
+        return filePath.includes('style');
+      }
     })
   ],
   devtool: STYLE_DEBUG === 'SOURCE' && 'source-map'