Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    prestashop-marketplace-mod

    How to use Webpack in PrestaShop 1.7 Classic theme

    How to use Webpack in PrestaShop 1.7 Classic theme

    PrestaShop 1.7 is using Webpack Module Bundler to manage assets in PrestaShop front. Webpack takes modules with dependencies and generates static assets representing those modules.

    Before installing Webpack you have to install node.js .

    Now, Using npm package manager you can install Webpack.

    Install Webpack in PrestaShop/themes/classic/_dev folder.

    After successful installation of Webpack, you need to install some modules of Webpack.


    After installing these modules you can see the folder ‘node_modules’ in your _dev folder.

    In _dev folder there is a file ‘webpack.config.js’ which is having the configuration for webpack.


    Now create your js or css file in _dev/css or _dev/js file,

    Now, run these command to create compiled file in assets/css and assets/js file,

    In the directory, _dev run these commands,

    To build your assets once


     

    To rebuild your assets every time you change a file in the _dev folder


    You can see now the compiled file in your assets/css or js folder.

    Troubleshoot while run these commands,

    Error :: Module build failed: ReferenceError: Promise is not defined

    • Check your node version, Try to install, 7.2.0

    and then added require(‘es6-promise’).polyfill() at the top of webpack.config.js.

    Reference :: http://developers.prestashop.com/themes/assets/index.html#about-webpack

    . . .

    Comments (4)

    Add Your Comment

  • A G
    after npm run build or npm run watch in log file I get:

    0 info it worked if it ends with ok
    1 verbose cli [ ‘C:\Program Files\nodejs\node.exe’,
    1 verbose cli ‘C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’,
    1 verbose cli ‘run’,
    1 verbose cli ‘build’ ]
    2 info using npm@3.10.10
    3 info using node@v6.10.2
    4 verbose stack Error: ENOENT: no such file or directory, open ‘C:xampphtdocsmypresta-comthemesmypresta_devpackage.json’
    4 verbose stack at Error (native)
    5 verbose cwd C:xampphtdocsmypresta-comthemesmypresta_dev
    6 error Windows_NT 10.0.14393
    7 error argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” “build”
    8 error node v6.10.2
    9 error npm v3.10.10
    10 error path C:xampphtdocsmypresta-comthemesmypresta_devpackage.json
    11 error code ENOENT
    12 error errno -4058
    13 error syscall open
    14 error enoent ENOENT: no such file or directory, open ‘C:xampphtdocsmypresta-comthemesmypresta_devpackage.json’
    15 error enoent ENOENT: no such file or directory, open ‘C:xampphtdocsmypresta-comthemesmypresta_devpackage.json’
    15 error enoent This is most likely not a problem with npm itself
    15 error enoent and is related to npm not being able to find a file.
    16 verbose exit [ -4058, true ]

  • Tess Hsu
    Hi, thanks for tutorial, I had the same Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    – configuration has an unknown property ‘postcss’. These properties are valid:
    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
    For typos: please correct them.
    issue after run: npm run build, but message is more likely webpack API initial issue:
  • Andrey
    Hi, Dheeraj Sharma! Thanks for this guide. After command “npm run build” I have had this message:
    “WARNING in ./~/flexibility/flexibility.js
    Critical dependencies:
    1:413-420 This seems to be a pre-built javascript file. Though this is possible, it’s not recommended. Try to require the original source to get better results.
    @ ./~/flexibility/flexibility.js 1:413-420”

    I am not expert with this. Can you help me to solve it?

    • Reply to Andrey
      Run the comand:
      npm install
      It should install all the dependencies
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close