fix(pack): 修复自身版本号使用 webpack-md5-hash 时问题

Author: yuhaoju

lib/models/Config.js

@@ -8,7 +8,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 var path = require('path');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var WebpackMd5Hash = require('webpack-md5-hash');
 
 var normalize = require('../utils/path').normalize;
 
@@ -61,10 +60,7 @@ var Config = function () {
             },
             plugins: [
             // local plugin
-            require('../plugins/extTemplatedPathPlugin.js'), require('../plugins/requireModulePlugin.js'),
-
-            // vender plugin
-            new WebpackMd5Hash()],
+            require('../plugins/extTemplatedPathPlugin.js'), require('../plugins/requireModulePlugin.js')],
             resolve: {
                 root: [],
                 extensions: ['', '.js', '.css', '.json', '.string', '.tpl'],

lib/models/Project.js

@@ -335,32 +335,43 @@ var Project = function () {
                     });
 
                     // 压缩
-                    var computecluster = require('compute-cluster');
-                    var cc = new computecluster({
-                        module: sysPath.resolve(__dirname, '../modules/minifyWorker.js'),
-                        max_backlog: -1,
-                        max_processes: 5
-                    });
-
                     if (opt.min) {
                         (function () {
+                            var computecluster = require('compute-cluster');
+                            var cc = new computecluster({
+                                module: sysPath.resolve(__dirname, '../modules/minWorker.js'),
+                                max_backlog: -1,
+                                max_processes: 5
+                            });
+
                             spinner.start();
 
                             var assetsInfo = stats.toJson({
                                 errorDetails: false
                             }).assets;
                             var processToRun = assetsInfo.length;
 
+                            var originAssets = stats.compilation.assets;
+                            var nextAssets = {};
                             assetsInfo.forEach(function (asset) {
                                 cc.enqueue({
                                     opt: opt,
                                     cwd: cwd,
                                     assetName: asset.name
-                                }, function (err) {
+                                }, function (err, response) {
                                     if (err) {
                                         error('an error occured:', err);
                                     }
 
+                                    // 将替换版本号的资源名取代原有名字
+                                    if (response.length > 0) {
+                                        var originAssetName = response[0];
+                                        var nextAssetName = response[1];
+                                        if (originAssets[originAssetName]) {
+                                            nextAssets[nextAssetName] = originAssets[originAssetName];
+                                        }
+                                    }
+
                                     processToRun -= 1;
                                     spinner.text = '[Minify] ' + (assetsInfo.length - processToRun) + '/' + assetsInfo.length + ' assets';
 
@@ -372,6 +383,9 @@ var Project = function () {
                                     }
                                 });
                             });
+
+                            // 更新 stats
+                            stats.compilation.assets = nextAssets;
                         })();
                     } else {
                         afterPack();

lib/modules/minWorker.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var path = require('path');
+var fs = require('fs');
+var crypto = require('crypto');
+var jsParser = require('uglify-js').parser;
+var jsUglify = require('uglify-js').uglify;
+var cssUglify = require('uglifycss');
+
+process.on('message', function (m) {
+    var opt = m.opt;
+    var cwd = m.cwd;
+    var assetName = m.assetName;
+    var nameReg = /^([^\@]*)\@?([^\.]+)(\.(js|css))$/;
+    var replacedAssets = [];
+
+    if (/\.js$/.test(assetName) || /\.css$/.test(assetName)) {
+        var content = fs.readFileSync(path.resolve(cwd, assetName), { encoding: 'utf8' });
+        var minifiedCode = null;
+
+        if (path.extname(assetName) === '.js') {
+            // variable name mangling
+            var willMangle = true;
+            if (typeof opt.min === 'string' && opt.min.split('=')[0] === 'mangle' && opt.min.split('=')[1] === 'false') {
+                willMangle = false;
+            }
+            var ast = jsParser.parse(content);
+            ast = willMangle ? jsUglify.ast_mangle(ast) : ast;
+            ast = jsUglify.ast_squeeze(ast);
+            minifiedCode = jsUglify.gen_code(ast, true);
+        } else if (path.extname(assetName) === '.css') {
+            minifiedCode = cssUglify.processString(content);
+        }
+
+        if (minifiedCode) {
+            fs.writeFileSync(path.resolve(cwd, assetName), minifiedCode, { encoding: 'utf8' });
+
+            // 重新生成版本号， webpack 打的样式文件 hash 会根据所在目录不同而不同，造成 beta/prd 环境下版本号不一致
+            var matchInfo = assetName.match(nameReg),
+                version = matchInfo[2];
+
+            var nextVersion = md5(minifiedCode);
+            var nextName = assetName.replace(version, nextVersion);
+            fs.renameSync(path.resolve(cwd, assetName), path.resolve(cwd, nextName));
+
+            replacedAssets = [assetName, nextName];
+        }
+    }
+
+    process.send(replacedAssets);
+});
+
+function md5(content) {
+    return crypto.createHash('md5').update(content).digest('hex');
+}

package.json

@@ -52,8 +52,7 @@
     "through2": "^2.0.1",
     "uglify-js": "^1.3.5",
     "uglifycss": "0.0.25",
-    "webpack": "^1.13.1",
-    "webpack-md5-hash": "0.0.5"
+    "webpack": "^1.13.1"
   },
   "repository": {
     "type": "http",

src/models/Config.js

@@ -1,7 +1,6 @@
 'use strict';
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const WebpackMd5Hash = require('webpack-md5-hash');
 
 const normalize = require('../utils/path').normalize;
 
@@ -56,10 +55,7 @@ class Config {
             plugins: [
                 // local plugin
                 require('../plugins/extTemplatedPathPlugin.js'),
-                require('../plugins/requireModulePlugin.js'),
-
-                // vender plugin
-                new WebpackMd5Hash()
+                require('../plugins/requireModulePlugin.js')
             ],
             resolve: {
                 root: [],

src/models/Project.js

@@ -311,31 +311,42 @@ class Project {
                 });
 
                 // 压缩
-                const computecluster = require('compute-cluster');
-                const cc = new computecluster({
-                    module: sysPath.resolve(__dirname , '../modules/minifyWorker.js'),
-                    max_backlog: -1,
-                    max_processes: 5
-                });
-
                 if(opt.min) {
+                    const computecluster = require('compute-cluster');
+                    const cc = new computecluster({
+                        module: sysPath.resolve(__dirname , '../modules/minWorker.js'),
+                        max_backlog: -1,
+                        max_processes: 5
+                    });
+
                     spinner.start();
 
                     const assetsInfo = stats.toJson({
                         errorDetails: false
                     }).assets;
                     let processToRun = assetsInfo.length;
 
+                    const originAssets = stats.compilation.assets;
+                    const nextAssets = {};
                     assetsInfo.forEach((asset) => {
                         cc.enqueue({
                             opt: opt,
                             cwd: cwd,
                             assetName: asset.name
-                        }, (err) => {
+                        }, (err, response) => {
                             if (err) {
                                 error('an error occured:', err);
                             }
 
+                            // 将替换版本号的资源名取代原有名字
+                            if(response.length > 0) {
+                                const originAssetName = response[0];
+                                const nextAssetName = response[1];
+                                if(originAssets[originAssetName]) {
+                                    nextAssets[nextAssetName] = originAssets[originAssetName];
+                                }
+                            }
+
                             processToRun -= 1;
                             spinner.text = `[Minify] ${assetsInfo.length - processToRun}/${assetsInfo.length} assets`;
 
@@ -347,6 +358,9 @@ class Project {
                             }
                         });
                     });
+
+                    // 更新 stats
+                    stats.compilation.assets = nextAssets;
                 } else {
                     afterPack();
                 }

src/modules/minifyWorker.js renamed to src/modules/minWorker.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const crypto = require('crypto');
 const jsParser = require('uglify-js').parser;
 const jsUglify = require('uglify-js').uglify;
 const cssUglify = require('uglifycss');
@@ -8,6 +9,8 @@ process.on('message', function(m) {
     const opt = m.opt;
     const cwd = m.cwd;
     const assetName = m.assetName;
+    const nameReg = /^([^\@]*)\@?([^\.]+)(\.(js|css))$/;
+    let replacedAssets = [];
 
     if(/\.js$/.test(assetName) || /\.css$/.test(assetName)) {
         const content = fs.readFileSync(path.resolve(cwd, assetName), {encoding: 'utf8'});
@@ -25,10 +28,26 @@ process.on('message', function(m) {
             minifiedCode = jsUglify.gen_code(ast, true);
         } else if (path.extname(assetName) === '.css') {
             minifiedCode = cssUglify.processString(content);
-        } 
+        }
 
-        minifiedCode && fs.writeFileSync(path.resolve(cwd, assetName), minifiedCode, {encoding: 'utf8'});
+        if(minifiedCode) {
+            fs.writeFileSync(path.resolve(cwd, assetName), minifiedCode, {encoding: 'utf8'});
+
+            // 重新生成版本号， webpack 打的样式文件 hash 会根据所在目录不同而不同，造成 beta/prd 环境下版本号不一致
+            var matchInfo = assetName.match(nameReg),
+                version = matchInfo[2];
+
+            const nextVersion = md5(minifiedCode);
+            const nextName = assetName.replace(version, nextVersion);
+            fs.renameSync(path.resolve(cwd, assetName), path.resolve(cwd, nextName));
+
+            replacedAssets = [assetName, nextName];
+        }
     }
 
-    process.send('complete');
+    process.send(replacedAssets);
 });
+
+function md5(content) {
+    return crypto.createHash('md5').update(content).digest('hex');
+}

yarn.lock

@@ -863,10 +863,6 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-charenc@~0.0.1:
-  version "0.0.1"
-  resolved "http://registry.npm.corp.qunar.com/charenc/download/charenc-0.0.1.tgz#004cff9feaf102382ed12db58dd6f962796d6e88"
-
 chokidar@^1.0.0, chokidar@^1.6.1:
   version "1.6.1"
   resolved "http://registry.npm.corp.qunar.com/chokidar/download/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
@@ -1271,10 +1267,6 @@ cross-spawn-async@^2.1.1:
     lru-cache "^4.0.0"
     which "^1.2.8"
 
-crypt@~0.0.1:
-  version "0.0.1"
-  resolved "http://registry.npm.corp.qunar.com/crypt/download/crypt-0.0.1.tgz#5f11b21a6c05ef1b5e79708366da6374ece1e6a2"
-
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "http://registry.npm.corp.qunar.com/cryptiles/download/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -2746,7 +2738,7 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@~1.1.1:
+is-buffer@^1.0.2:
   version "1.1.4"
   resolved "http://registry.npm.corp.qunar.com/is-buffer/download/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
 
@@ -3348,14 +3340,6 @@ math-expression-evaluator@^1.2.14:
   dependencies:
     lodash.indexof "^4.0.5"
 
-md5@^2.0.0:
-  version "2.2.1"
-  resolved "http://registry.npm.corp.qunar.com/md5/download/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
-  dependencies:
-    charenc "~0.0.1"
-    crypt "~0.0.1"
-    is-buffer "~1.1.1"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "http://registry.npm.corp.qunar.com/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5374,12 +5358,6 @@ webpack-core@~0.6.0:
     source-list-map "~0.1.0"
     source-map "~0.4.1"
 
-webpack-md5-hash@0.0.5:
-  version "0.0.5"
-  resolved "http://registry.npm.corp.qunar.com/webpack-md5-hash/download/webpack-md5-hash-0.0.5.tgz#d9f1899ead664459dd8b6b0c926ac71cfbd7bc7a"
-  dependencies:
-    md5 "^2.0.0"
-
 webpack-sources@^0.1.0:
   version "0.1.3"
   resolved "http://registry.npm.corp.qunar.com/webpack-sources/download/webpack-sources-0.1.3.tgz#15ce2fb79d0a1da727444ba7c757bf164294f310"