feat: 对打包出来的html里面replace掉cdn目录路径

Author: cpselvis

lib/builder.js

@@ -19,6 +19,7 @@ const ZipWebpackPlugin = require('zip-webpack-plugin');
 const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const ReplaceBundleStringPlugin = require('replace-bundle-webpack-plugin');
+const HtmlStringReplace = require('html-string-replace-webpack-plugin');
 const { deepCopy, listDir } = require('./util');
 const Config = require('./config');
 const projectRoot = Config.getPath();
@@ -113,6 +114,7 @@ class Builder {
         const assetsPrefix = `cdn/${bizName}`;
         const cdnUrl = `//11.url.cn/now/${moduleName}/${bizName}`;
         const serverUrl = `//now.qq.com/${moduleName}/${bizName}`;
+        const regex = new RegExp(assetsPrefix + '/', 'g');
 
         // 设置打包规则
         const prodRules = [];
@@ -145,8 +147,10 @@ class Builder {
         const { newEntry, htmlWebpackPlugins} = Builder._setMultiplePage(prodConfig.entry, options.minifyHTML || true, options.inject, false, assetsPrefix, htmlPrefix);
 
         prodPlugins = prodPlugins.concat(htmlWebpackPlugins);
-        // 由于静态文件打包到了 cdn 目录，assets路径引用问题采用全局替换策略进行修复
-        prodPlugins.push(Builder._setReplacePlugin(new RegExp(assetsPrefix + '/', 'g'), ''));
+        // 修复html引用css和js的路径问题
+        prodPlugins.push(Builder._setReplaceHtmlPlugin(regex, ''));
+        // 修复js和css中引用的图片路径问题
+        prodPlugins.push(Builder._setReplaceBundlePlugin(regex, ''));
         prodPlugins.push(Builder._setOffline(assetsPrefix, htmlPrefix, cdnUrl, serverUrl));
 
         prodConfig.entry = newEntry;
@@ -291,13 +295,35 @@ class Builder {
 
 
     /**
-     * 打包构建后替换的内容
+     * 打包构建后替换的内容, 此处替换html文件
      * @param regex                正则
      * @param replaceWith          替换成xx字符串
-     * @returns {ReplaceBundlePlugin}
+     * @returns {HtmlStringReplace}
      * @private
      */
-    static _setReplacePlugin(regex, replaceWith) {
+    static _setReplaceHtmlPlugin(regex, replaceWith) {
+        return new HtmlStringReplace({
+            enable: true,
+            patterns: [
+                {
+                    match: regex,
+                    replacement: () => {
+                        return replaceWith;
+                    }
+                }
+            ]
+        })
+    }
+
+
+    /**
+     * 打包构建后替换的内容, 此处替换css和js文件
+     * @param regex                正则
+     * @param replaceWith          替换成xx字符串
+     * @returns {ReplaceBundleStringPlugin}
+     * @private
+     */
+    static _setReplaceBundlePlugin(regex, replaceWith) {
         return new ReplaceBundleStringPlugin([{
             partten: regex,
             replacement: () => {
@@ -365,34 +391,34 @@ class Builder {
 
         Object.keys(entries).map((index) => {
             const entry = entries[index];
-        const match = entry.match(/\/pages\/(.*)\/init.js/);
-        const pageName = match && match[1];
-        let filename = '';
-        if (htmlPrefix) {
-            filename = htmlPrefix + '/';
-        }
+            const match = entry.match(/\/pages\/(.*)\/init.js/);
+            const pageName = match && match[1];
+            let filename = '';
+            if (htmlPrefix) {
+                filename = htmlPrefix + '/';
+            }
 
-        newEntry[pageName] = entry;
-
-        htmlWebpackPlugins.push(
-            new HtmlWebpackPlugin({
-                inlineSource: inlineCSS ? '\\.css$' : undefined,
-                template: path.join(projectRoot, `src/pages/${pageName}/index.html`),
-                filename: `${filename}${pageName}.html`,
-                chunks: [pageName],
-                assetsPrefix: `${assetsPrefix}/`,
-                inject: inject,
-                minify: minifyHtml ? {
-                    html5: true,
-                    collapseWhitespace: true,
-                    preserveLineBreaks: false,
-                    minifyCSS: true,
-                    minifyJS: true,
-                    removeComments: false
-                }: false
-            })
-        );
-    });
+            newEntry[pageName] = entry;
+
+            htmlWebpackPlugins.push(
+                new HtmlWebpackPlugin({
+                    inlineSource: inlineCSS ? '\\.css$' : undefined,
+                    template: path.join(projectRoot, `src/pages/${pageName}/index.html`),
+                    filename: `${filename}${pageName}.html`,
+                    chunks: [pageName],
+                    assetsPrefix: `${assetsPrefix}/`,
+                    inject: inject,
+                    minify: minifyHtml ? {
+                        html5: true,
+                        collapseWhitespace: true,
+                        preserveLineBreaks: false,
+                        minifyCSS: true,
+                        minifyJS: true,
+                        removeComments: false
+                    }: false
+                })
+            );
+        });
 
         return {
             newEntry,
@@ -410,20 +436,20 @@ class Builder {
      */
     static _setOffline(assetsPrefix, htmlPrefix, cdnUrl, serverUrl) {
         return new ZipWebpackPlugin({
-                path: path.join(projectRoot,'./public/offline'),
-                filename: 'offline.zip',
-                pathMapper: (assetPath) => {
+            path: path.join(projectRoot,'./public/offline'),
+            filename: 'offline.zip',
+            pathMapper: (assetPath) => {
                 if (assetPath.indexOf(htmlPrefix) !== -1) {
-            assetPath = assetPath.replace(htmlPrefix, '');
-            return path.join(serverUrl.replace('//', ''), assetPath);
-        } else if (assetPath.indexOf(assetsPrefix) !== -1) {
-            assetPath = assetPath.replace(assetsPrefix, '');
-            return path.join(cdnUrl.replace('//', ''), assetPath);
-        }
+                    assetPath = assetPath.replace(htmlPrefix, '');
+                    return path.join(serverUrl.replace('//', ''), assetPath);
+                } else if (assetPath.indexOf(assetsPrefix) !== -1) {
+                    assetPath = assetPath.replace(assetsPrefix, '');
+                    return path.join(cdnUrl.replace('//', ''), assetPath);
+                }
 
-        return assetPath;
-    }
-    })
+                return assetPath;
+            }
+        })
     }
 
     /**
@@ -453,11 +479,11 @@ class Builder {
 
         listDir(path.join(projectRoot, './src'), 1)
             .forEach((dir) => {
-            const { name, dirPath } = dir;
+                const { name, dirPath } = dir;
 
-        aliasObject['/' + name] = dirPath;
-        aliasObject[name] = dirPath;
-    });
+                aliasObject['/' + name] = dirPath;
+                aliasObject[name] = dirPath;
+            });
 
         return aliasObject;
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "builder-webpack3",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "webpack项目构建器.",
   "main": "lib/index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "glob": "^7.1.2",
     "happypack": "^4.0.0",
     "html-loader": "^0.5.1",
+    "html-string-replace-webpack-plugin": "^1.0.5",
     "html-webpack-externals-plugin": "^3.6.0",
     "html-webpack-inline-source-plugin": "0.0.9",
     "html-webpack-plugin": "^2.30.1",