Setting Up Hot Module Replacement for Webpack 1.x in Prestashop 1.7

Setting Up Hot Module Replacement for Webpack 1.x in Prestashop 1.7

In this article we are going to give a brief description how to modify your webpack.config.js file to enable hot module replacement. 

First off, install all necessary dependencies:

Once the installation is ready, create the file hot.webpack.js 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.

‘browser-sync’ serves as a connecting link to our local server which has prestashop 1.7 and webpack with webpack-dev-middleware and webpack-hot-middleware installed.

An important note:  In the webpack config file you should specify output.publicPath,  indicate browser-sync server’s host, port number and also disable watch = false!

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.

Note: webpack-dev-middleware does not save the project on the hard drive but keeps it in memory (memory-fs).

BrowserSync also has its own wather: browserSync settings let you configure a task to monitor *.tpl templates and reload page every time the templates are modified.

Next you should modify webpack.config.js Create a  HOT constant which will provide compatibility with the default webpack. Add an option to disable ExtractTextPlugin  when in “hot mode” because we do not need to collect all styles into a single .css file.

Modify entries  with the help of the addHOT  function. We will be adding scripts that will provide interaction between browser and assembler into the project.

Add HotModuleReplacementPlugin

 Add a new  loader to all .js files  : monkey-hot-loader

Everything is ready now, so let’s run the assembler in ‘hot mode’:

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.

Setting Up Hot Module Replacement for Webpack 1.x in Prestashop 1.7The code provided in this article is also available in our test repository: https://github.com/retyui/prestashop-1.7-webpack-hot-module-replacement/
This will help you better understand the concept of hot module replacement.

 



2 comments

  1. Thx for great guide, its working!

    If not working file watcher, add
    plugins.push(
    new webpack.OldWatchingPlugin()
    );
    in webpack.config.js, for webpack 1.12+ version.

  2. GUYS your ROCK, NO SERIOUSLY.
    I have a little knowledge of Webpack and Node.js
    I tried to configure myself using the code on the Githab, tried it for about 4 hours, then I decided to ask for help, since I had no chance do it myself.

    And now the main thing, I was helped by David from the company Belvg, for FREE, no, seriously, he spent more than 2 hours of his time to set it up.

    To be honest, I did not meet such a good impression and attitude anywhere, and I worked with many people.

    These manuals, this manual can save your life.
    I spent about a month or even more trying to set it up myself, seriously, a month.

    No one, no company, and even PrestaShop, did such a manual.

    These guys are the best, they are just the best.
    The best service you will not find anywhere else.

    I’m shocked, seriously, I decided my biggest headache with 1.7, only with Belvg

    P.S.
    One of the main problems was double slashes //
    References to styles and scripts were generated with double slashes, on a local environment, this prevented the HMR

    Best Regards,
    Alexandr

Post a new comment