{"id":12614,"date":"2017-03-14T15:30:08","date_gmt":"2017-03-14T12:30:08","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=12614"},"modified":"2025-07-03T08:57:12","modified_gmt":"2025-07-03T06:57:12","slug":"setting-up-hot-module-replacement-for-webpack-1-x-in-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/setting-up-hot-module-replacement-for-webpack-1-x-in-prestashop-1-7.html","title":{"rendered":"Setting Up Hot Module Replacement for Webpack 1.x in Prestashop 1.7"},"content":{"rendered":"\n

In this article we are going to give a brief description how to modify your webpack.config.js<\/em> file to enable hot module replacement. <\/p>\n

First off, install all necessary dependencies:<\/p>\n

npm install --save-dev browser-sync webpack@1 webpack-dev-middleware webpack-hot-middleware monkey-hot-loader rimraf\r\n\/\/or\r\nyarn add -D browser-sync webpack@1 webpack-dev-middleware webpack-hot-middleware monkey-hot-loader rimraf<\/pre>\n
Once the installation is ready, create the file hot.webpack.js<\/a> that will proxify our local server and will be reassembling the project in case any files are modified and will be updating those files in browser in real time.<\/p>\n
\/**\r\n * Require Browsersync along with webpack and middleware for it\r\n *\/\r\nlet browserSync          = require('browser-sync').create();\r\nlet webpack              = require('webpack');\r\nlet webpackDevMiddleware = require('webpack-dev-middleware');\r\nlet webpackHotMiddleware = require('webpack-hot-middleware');\r\nlet webpackConfig        = require('.\/webpack.config.js');\r\n\/**\r\n * Require .\/webpack.config.js and make a bundler from it\r\n *\/\r\nconst bsPort = 3000;\r\nwebpackConfig.watch = false;\r\nwebpackConfig.output.publicPath = `http:\/\/localhost:${bsPort}\/ps\/themes\/classic\/assets\/js\/` \/\/ url to webpack output path\r\n\r\nlet bundler = webpack(webpackConfig);\r\n\/**\r\n * Run Browsersync and use middleware for Hot Module Replacement\r\n *\/\r\nbrowserSync.init({\r\n            open: true\r\n            , port: bsPort\r\n            , proxy: {\r\n                        target: `http:\/\/localhost:88` \/\/host your local webserver\r\n            }\r\n            , src: [`.\/templates\/**\/*.tpl`, `.\/modules\/**\/*.tpl`] \/\/ full page reload if .tpl file changed\r\n            , middleware: [\r\n                        webpackDevMiddleware( bundler, {\r\n                                   \/\/ IMPORTANT: dev middleware can't access config, so we should\r\n                                   \/\/ provide publicPath by ourselves\r\n                                   publicPath: webpackConfig.output.publicPath\r\n                                   , stats: { colors: true , chunck : false}\r\n                                   , hot: true\r\n                        } ),\r\n                       webpackHotMiddleware( bundler )\r\n            ]\r\n});<\/pre>\n
‘browser-sync’ serves as a connecting link to our local server<\/a> which has prestashop 1.7 and webpack with webpack-dev-middleware and webpack-hot-middleware<\/a> installed.<\/p>\n
An important note:  In the webpack config file you should specify output.publicPath<\/a>,  indicate browser-sync server’s host, port number and also disable watch = false<\/a>!<\/p>\n
A browser sends requests to browser-sync server and the server then redirects them to the middleware array. Then webpack-dev-middleware verifies the url of the query and publicPath. If they coincide webpack-dev-middleware searches memory for the file and forwards the file to the browser, otherwise forwards the request further to the local server.<\/p>\n
Note: webpack-dev-middleware does not save the project on the hard drive but keeps it in memory (<\/em>memory-fs).<\/em><\/p>\n
BrowserSync also has its own wather: browserSync settings<\/a> let you configure a task to monitor *.tpl templates and reload page every time the templates are modified.<\/p>\n
Next you should modify webpack.config.js<\/a> Create a  HOT constant<\/a> which will provide compatibility with the default webpack. Add an option<\/a> to disable ExtractTextPlugin  when in “hot mode” because we do not need to collect all styles into a single .css file.<\/p>\n
>  new ExtractTextPlugin(\r\n    path.join('..', 'css', 'theme.css')\r\n    ,{\r\n      disable: HOT \/\/ if hot enabled disable ExtractTextPlugin\r\n    }\r\n  )\r\n<\/pre>\n
Modify entries <\/a> with the help of the addHOT  function. We will be adding scripts that will provide interaction between browser and assembler into the project.<\/p>\n
let addHOT = (arr, disable) => {\r\n  if (HOT) {\r\n    arr.unshift('webpack\/hot\/dev-server', 'webpack-hot-middleware\/client');\r\n  }\r\n  return arr;\r\n};\r\n\/\/\/\r\nmodule.exports = {\r\n  entry: {\r\n    theme: addHOT(['.\/js\/theme.js'])\r\n  },\r\n\/\/\/\r\n<\/pre>\n
Add HotModuleReplacementPlugin<\/a><\/p>\n
if (HOT) {\r\n  plugins.push(new webpack.HotModuleReplacementPlugin())\r\n}\r\n<\/pre>\n
 Add a new <\/a> loader<\/a> to all .js files  : monkey-hot-loader<\/p>\n
module: {\r\n    loaders: [{\r\n      test: \/\\.js$\/,\r\n      exclude: \/node_modules\/,\r\n      loaders: (HOT? ['monkey-hot-loader','babel-loader']: ['babel-loader'])\r\n    }]}\r\n\/\/...\r\n<\/pre>\n
Everything is ready now, so let’s run the assembler in ‘hot mode’:<\/p>\n
node .\/hot.webpack.js<\/pre>\n
Once started, the browser will launch our proxified web-server. If you open the developers console you will see how the browser communicates with the webpack module and updates all files in real time.<\/p>\n
\"SettingThe code provided in this article is also available in our test repository: https:\/\/github.com\/retyui\/prestashop-1.7-webpack-hot-module-replacement\/<\/a>
\nThis will help you better understand the concept of hot module replacement.<\/p>\n
 <\/p>\n\n","protected":false},"excerpt":{"rendered":"In this article we are going to give a brief description how to modify your …","protected":false},"author":82,"featured_media":12623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,520,461],"tags":[],"class_list":["post-12614","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-prestashop","category-prestashop-custom-development","category-prestashop-development","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t