retyui / prestashop-1.7-webpack-3-hot-module-replacement

Prestashop theme. Webpack 3 migration and hot module replacement

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸŽ‰ 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

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

About

Prestashop theme. Webpack 3 migration and hot module replacement

License:MIT License


Languages

Language:Smarty 67.8%Language:CSS 15.7%Language:JavaScript 8.3%Language:PHP 8.2%