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.

 



9 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

  3. Thank you a lot! I used github version for webpack 2. But I have a problem – localhost:3000 which opens after bulid, gives me unlimited loading and then ERR_EMPTY_RESPONSE. Here is what I have in cmd: http://roythemes.com/z_download/webpack.png

    Before it, with classic webpack config – I had normal access to website after build. Maybe you have some ideas?

  4. I’m sorry, thank you, my bad of course. I changed and it works. But now I have a problem: css file builds when I use npm run build https://gyazo.com/6501859d1775edb6dc77ac84dd78e491 , but not builds if I use npm run hot. https://gyazo.com/3679e07c2fcdeec3b993f219907a74e5

    If I change something in files – in cmd I see that webpack run building, then I see succesfull message, but browser not reloads. And if I reload it by hands I see Connected to browsersync message.

    Sorry, I’m new to webpack. Appreciate your help.

  5. Hello, Roy!
    It’s a common mistake. Usually, it happens because of the incorrect setting of webpackConfig.output.publicPath, that is used by webpackDevMiddleware to compare the local file and the URL on the web-page.
    To fix the mistake check if the way is correct:
    1) for webpack
    https://github.com/retyui/prestashop-1.7-webpack-hot-module-replacement/blob/master/_dev/webpack.config.js#L47
    2) and for webpackDevMiddleware. In the example, I use URL for a default classic theme
    https://github.com/retyui/prestashop-1.7-webpack-hot-module-replacement/blob/master/_dev/hot.webpack.js#L14

  6. Thank you for answer, for the first I use
    path: path.resolve(__dirname + ‘/../assets/js’),
    and it builds.

    for the hot config I tried:
    http://localhost:${bsPort}/themes/classic/assets/js/
    http://demo.dev:${bsPort}/themes/classic/assets/js/
    http://localhost:3000/themes/classic/assets/js/
    http://demo.dev:3000/themes/classic/assets/js/

    Still same problem. When I change something in theme.scss I see this in console: https://gyazo.com/a05847a2d83380259a724eb856064eec but browser not reload any part, and even manual reload not shows new style.
    P.S. I use your build for webpack2, just renamed theme and changed it in theme.yml to ‘classic’.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *