hot addet

_dev/hot.webpack.js

@@ -0,0 +1,38 @@
+/**
+ * Require Browsersync along with webpack and middleware for it
+ */
+let browserSync          = require('browser-sync').create();
+let webpack              = require('webpack');
+let webpackDevMiddleware = require('webpack-dev-middleware');
+let webpackHotMiddleware = require('webpack-hot-middleware');
+let webpackConfig        = require('./webpack.config.js');
+/**
+ * Require ./webpack.config.js and make a bundler from it
+ */
+const bsPort = 3000;
+webpackConfig.watch = false;
+webpackConfig.output.publicPath = `http://localhost:${bsPort}/ps/themes/classic/assets/js/` // url to webpack output path
+
+let bundler = webpack(webpackConfig);
+
+/**
+ * Run Browsersync and use middleware for Hot Module Replacement
+ */
+browserSync.init({
+	open: true
+	, port: bsPort
+	, proxy: {
+		target: `http://localhost:88` //host your local webserver
+	}
+	, src: [`./templates/**/*.tpl`, `./modules/**/*.tpl`] // full page reload if .tpl file changed
+	, middleware: [
+		webpackDevMiddleware( bundler, {
+			// IMPORTANT: dev middleware can't access config, so we should
+			// provide publicPath by ourselves
+			publicPath: webpackConfig.output.publicPath
+			, stats: { colors: true , chunck : false}
+			, hot: true
+		} ),
+		webpackHotMiddleware( bundler )
+	]
+});

_dev/package.json

@@ -1,35 +1,41 @@
 {
-  "name": "prestashop-starter-theme-dev-tools",
-  "version": "0.0.1",
-  "description": "Tools to help while developing the starter theme",
-  "main": "index.js",
-  "scripts": {
-    "watch": "webpack -w",
-    "build": "webpack"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "babel-loader": "^5.3.2",
-    "bootstrap": "4.0.0-alpha.4",
-    "bootstrap-touchspin": "^3.1.1",
-    "bourbon": "^4.2.6",
-    "css-loader": "^0.23.1",
-    "expose-loader": "^0.7.1",
-    "extract-text-webpack-plugin": "^1.0.0",
-    "file-loader": "^0.8.5",
-    "flexibility": "^1.0.5",
-    "jquery": "^2.1.4",
-    "material-design-icons": "^2.1.3",
-    "node-sass": "^3.4.2",
-    "open-sans-fontface": "1.4.0",
-    "postcss-flexibility": "^1.0.2",
-    "postcss-loader": "^0.8.0",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
-    "tether": "^1.1.1",
-    "velocity-animate": "^1.2.3",
-    "webpack": "^1.12.9",
-    "webpack-sources": "^0.1.0"
-  }
-}
+	"name": "prestashop-starter-theme-dev-tools"
+	, "version": "0.0.1"
+	, "description": "Tools to help while developing the starter theme"
+	, "main": "index.js"
+	, "scripts": {
+		"hot": "node ./hot.webpack.js"
+		, "watch": "webpack -w"
+		, "build": "webpack"
+	}
+	, "author": ""
+	, "license": "ISC"
+	, "devDependencies": {
+		"babel-loader": "5.3.2"
+		, "bootstrap": "4.0.0-alpha.4"
+		, "bootstrap-touchspin": "3.1.1"
+		, "bourbon": "^4.2.6"
+		, "browser-sync": "2.18.8"
+		, "css-loader": "0.23.1"
+		, "expose-loader": "0.7.1"
+		, "extract-text-webpack-plugin": "1.0.0"
+		, "file-loader": "0.8.5"
+		, "flexibility": "1.0.5"
+		, "jquery": "2.1.4"
+		, "material-design-icons": "2.1.3"
+		, "monkey-hot-loader": "0.0.3"
+		, "node-sass": "3.4.2"
+		, "open-sans-fontface": "1.4.0"
+		, "postcss-flexibility": "1.0.2"
+		, "postcss-loader": "0.8.0"
+		, "rimraf": "2.6.1"
+		, "sass-loader": "3.1.2"
+		, "style-loader": "0.13.0"
+		, "tether": "1.1.1"
+		, "velocity-animate": "1.2.3"
+		, "webpack": "1"
+		, "webpack-dev-middleware": "1.10.1"
+		, "webpack-hot-middleware": "2.17.1"
+		, "webpack-sources": "0.1.0"
+	}
+}

_dev/webpack.config.js

@@ -22,6 +22,10 @@
  * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
  * International Registered Trademark & Property of PrestaShop SA
  */
+var ref;
+const HOT = ((ref = module.parent.filename) != null ? ref.indexOf('hot.webpack.js') : void 0) !== -1;
+console.log('Webpack HOT : ',HOT,'\n');
+
 var webpack = require('webpack');
 var path = require('path');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
@@ -39,28 +43,49 @@ if (production) {
     })
   );
 }
+if (HOT) {
+  plugins.push(new webpack.HotModuleReplacementPlugin())
+}
 
 plugins.push(
   new ExtractTextPlugin(
-    path.join(
-      '..', 'css', 'theme.css'
-    )
+    path.join('..', 'css', 'theme.css')
+    ,{
+      disable: HOT // if hot enabled disable ExtractTextPlugin
+    }
   )
 );
 
+// plugins.unshift({
+//   apply: (compiler) => { // min plugin clear folder
+//     let rimraf = require(`rimraf`);
+//     [`/`, `/../css`].forEach((subPath) => {
+//       rimraf.sync(path.resolve(compiler.options.output.path + subPath));
+//     });
+//   }
+// });
+
+
+let addHOT = (arr, disable) => {
+  if (HOT) {
+    arr.unshift('webpack/hot/dev-server', 'webpack-hot-middleware/client');
+  }
+  return arr;
+};
+
 module.exports = {
-  entry: [
-    './js/theme.js'
-  ],
+  entry: {
+    theme: addHOT(['./js/theme.js'])
+  },
   output: {
-    path: '../assets/js',
+    path: path.resolve(__dirname + '/../assets/js'),
     filename: 'theme.js'
   },
   module: {
     loaders: [{
       test: /\.js$/,
       exclude: /node_modules/,
-      loaders: ['babel-loader']
+      loaders: (HOT? ['monkey-hot-loader','babel-loader']: ['babel-loader'])
     }, {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract(
@@ -83,7 +108,7 @@ module.exports = {
     $: '$',
     jquery: 'jQuery'
   },
-  devtool: 'source-map',
+  devtool: HOT ? 'cheap-module-inline-source-map' : 'source-map',
   plugins: plugins,
   resolve: {
     extensions: ['', '.js', '.scss']