解决 #webpack/webpack-dev-server#377 问题

build/rename.plugin.js

@@ -0,0 +1,42 @@
+var fs = require('fs');
+var path = require('path');
+var md5 = require('md5');
+
+
+function RenamePlugin() {
+}
+
+RenamePlugin.prototype.apply = function(compiler) {
+  compiler.plugin('done', function(stats) {
+    var htmlFiles = [];
+    var hashFiles = [];
+    var assets = stats.compilation.assets;
+
+    Object.keys(assets).forEach(function(fileName) {
+      var file = assets[fileName];
+      if (/\.(css|js)$/.test(fileName)) {
+        var hash = md5(file.source());
+        var newName = fileName.replace(/(.js|.css)$/, '.' + hash + '$1');
+        hashFiles.push({
+          originName: fileName,
+          hashName: newName
+        });
+        fs.rename(file.existsAt, file.existsAt.replace(fileName, newName));
+      } 
+      else if (/\.html$/) {
+        htmlFiles.push(fileName);
+      }
+    });
+
+    htmlFiles.forEach(function(fileName) {
+      var file = assets[fileName];
+      var contents = file.source();
+      hashFiles.forEach(function(item) {
+        contents = contents.replace(item.originName, item.hashName);
+      });
+      fs.writeFile(file.existsAt, contents, 'utf-8');
+    });
+  });
+};
+
+module.exports = RenamePlugin;

build/webpack.config.js

@@ -12,6 +12,7 @@ var ROOT_PATH = fullPath('../');
 var SRC_PATH = ROOT_PATH + '/src';
 // 产出路径
 var DIST_PATH = ROOT_PATH + '/dist';
+// var DIST_PATH = '/Users/xiaoyan/working/www';
 // node_modules
 var NODE_MODULES_PATH =  ROOT_PATH + '/node_modules';
 
@@ -61,7 +62,8 @@ var config = {
   },
   output: {
     path: DIST_PATH,
-    filename: 'js/[name].[hash].js'
+    filename: 'js/[name].js',
+    // filename: 'js/[name].[hash].js',
   },
   module: {},
   resolve: {
@@ -72,7 +74,8 @@ var config = {
       // http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'development')
     }),
-    new webpack.optimize.CommonsChunkPlugin('lib', 'js/[name].[hash].js')
+    new webpack.optimize.CommonsChunkPlugin('lib', 'js/[name].js')
+    // new webpack.optimize.CommonsChunkPlugin('lib', 'js/[name].[hash].js')
   ]
 };
 
@@ -102,7 +105,8 @@ if (__DEV__) {
     loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
   });
   config.plugins.push(
-    new ExtractTextPlugin('css/[name].[hash].css')
+    new ExtractTextPlugin('css/[name].css')
+    // new ExtractTextPlugin('css/[name].[hash].css')
   );
 }
 
@@ -153,6 +157,7 @@ config.plugins.push(
 );
 
 
+
 module.exports = config;
 
 

build/webpack.release.js

@@ -11,6 +11,7 @@
 
 var webpack = require('webpack');
 var config = require('./webpack.config');
+var RenamePlugin = require('./rename.plugin');
 
 var args = process.argv;
 var watch = args.indexOf('--watch') > -1;
@@ -27,6 +28,8 @@ if (online) {
   config.output.publicPath = testPublicPath; 
 }
 
+config.plugins.push(new RenamePlugin());
+
 var compiler = webpack(config);
 
 function callback(err, stats) {

package.json

@@ -13,7 +13,7 @@
     "dev:test": "NODE_ENV=development node build/webpack.dev.js --hot --deploy",
     "release": "npm run deploy:online",
     "deploy:test": "NODE_ENV=production node build/webpack.release.js --watch --uglify --deploy=test",
-    "deploy:online": "NODE_ENV=production node build/webpack.release.js --watch --uglify --deploy=online"
+    "deploy:online": "NODE_ENV=production node build/webpack.release.js --uglify --deploy=online"
   },
   "keywords": [
     "webpack",
@@ -37,6 +37,7 @@
     "glob": "^7.0.5",
     "html-webpack-plugin": "^2.22.0",
     "image-webpack-loader": "^2.0.0",
+    "md5": "^2.1.0",
     "node-sass": "^3.8.0",
     "postcss-loader": "^0.9.1",
     "precss": "^1.4.0",