Back to Top

How to use Webpack in PrestaShop 1.7 Classic theme

Updated 2 January 2017

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.

Searching for an experienced
Prestashop Company ?
Find out More

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

$ npm install --save-dev style-loader

$ npm install --save-dev css-loader

$ npm install --save-dev babel-loader

$ npm install --save-dev postcss-loader

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.

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var plugins = [];

var production = false;

if (production) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}

plugins.push(
  new ExtractTextPlugin(
    path.join(
      '..', 'css', 'theme.css'
    )
  )
);

module.exports = {
  entry: [
    './js/theme.js'
  ],
  output: {
    path: '../assets/js',
    filename: 'theme.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        "style",
        "css?sourceMap!postcss!sass?sourceMap"
      )
    }, {
      test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
      loader: 'file-loader?name=../css/[hash].[ext]'
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader!postcss-loader"
    }]
  },
  postcss: function() {
    return [require('postcss-flexibility')];
  },
  externals: {
    prestashop: 'prestashop'
  },
  devtool: 'source-map',
  plugins: plugins,
  resolve: {
    extensions: ['', '.js', '.scss']
  }
};

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

$ npm run build

 

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

$ npm run watch

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
  • $ npm install es6-promise --save

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


4 comments

  • A G
  • Tess Hsu
  • Andrey
    • Reply to Andrey
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home