Prestashop theme. Webpack 3 migration and hot module replacement

🎉 PrestaShop Classic Theme Example hot module replacement, webpack.config.js - for webpack 3.x version.

Based on Prestashop 1.7.2.4

Usage

Configuration prestashop

1. Clone theme <code>classic-demo-hot</code> to you <code>/themes/</code> folder. 2. Open in admin panel <code>Theme &amp; Logo -&gt; Theme</code> 3. Select <code>classic-demo-hot</code> theme 4. Open in admin panel <code>Advanced Parameters -&gt; Performance</code> 5. Set <code>SMARTY -&gt; Cache</code> : NO and Save! 6. done

Configuration theme

Open <code>/themes/classic-demo-hot/_dev/_webpack/util.js</code> and check all commented properties

Run

# go to _dev folder

cd /themes/classic-demo-hot/_dev/

install dependencies

yarn # or npm i

run webpack in watch mode

yarn watch # or npm run watch

open http://localhost:3000/ and check result

Changes (step by step)

📈 Updates

<code>webpack@2</code> => <code>webpack@3</code>

<code>babel-loader@6</code> => <code>babel-loader@7</code>

<code>extract-text-webpack-plugin@2</code> => <code>extract-text-webpack-plugin@3</code>

##### Install

yarn add -D webpack@3 extract-text-webpack-plugin@3 babel-loader@7

🆕 Added new

<code>browser-sync-dev-hot-webpack-plugin</code>

Webserver for proxy your php backend.

<code>bs-html-injector</code>

Browser-sync plugin for injecting HTML changes without reloading the browser.

<code>webpack-dev-middleware</code>

A development middleware for webpack read more...

<code>webpack-hot-middleware</code>

Webpack hot reloading you can attach to your own server read mode...

<code>webpack-merge</code>

It helps to conveniently configure types of configs (default / production / development)

##### Install

Required

yarn add -D browser-sync-dev-hot-webpack-plugin browser-sync@2 bs-html-injector@3 yarn add -D webpack-dev-middleware@2 webpack-hot-middleware@2 webpack-merge cross-env

Optional

yarn add -D babel-core@6 webpack-bundle-analyzer hard-source-webpack-plugin node-object-hash del

Added multi config which is combined depending on NODE_ENV

Updated scripts in <code>package.json</code>

🆘 Other

Example Hot Module Replacement for <code>Webpack 1.x</code> Prestashop 1.7

Example Hot Module Replacement for <code>Webpack 2.x</code> Prestashop 1.7