🎉 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 classic-demo-hot to you /themes/ folder.
2. Open in admin panel Theme & Logo -> Theme
3. Select classic-demo-hot theme
4. Open in admin panel Advanced Parameters -> Performance
5. Set SMARTY -> Cache : NO and Save!
6. done

Configuration theme

Open /themes/classic-demo-hot/_dev/_webpack/util.js 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

webpack@2 => webpack@3

babel-loader@6 => babel-loader@7

extract-text-webpack-plugin@2 => extract-text-webpack-plugin@3

Install

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

🆕 Added new

browser-sync-dev-hot-webpack-plugin

Webserver for proxy your php backend.

bs-html-injector

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

webpack-dev-middleware

A development middleware for webpack read more...

webpack-hot-middleware

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

webpack-merge

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 package.json

🆘 Other

Example Hot Module Replacement for Webpack 1.x Prestashop 1.7

Example Hot Module Replacement for Webpack 2.x Prestashop 1.7