{"id":68294,"date":"2016-12-16T16:17:13","date_gmt":"2016-12-16T16:17:13","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=68294"},"modified":"2017-01-02T12:40:40","modified_gmt":"2017-01-02T12:40:40","slug":"use-webpack-prestashop-1-7-classic-theme","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/use-webpack-prestashop-1-7-classic-theme\/","title":{"rendered":"How to use Webpack in PrestaShop 1.7 Classic theme"},"content":{"rendered":"

How to use Webpack in PrestaShop 1.7 Classic theme<\/strong><\/p>\n

PrestaShop 1.7 is using Webpack Module Bundler<\/a>\u00a0to manage assets in PrestaShop front.\u00a0Webpack takes modules with dependencies and generates static assets representing those modules.<\/p>\n

Before installing Webpack you have to install node.js<\/a>\u00a0.<\/p>\n

Now, Using npm\u00a0package manager you can install Webpack.<\/p>\n

Install Webpack in\u00a0PrestaShop\/themes\/classic\/_dev folder.<\/p>\n

After successful\u00a0installation\u00a0of Webpack, you need to install some modules of Webpack.<\/p>\n

$ npm install --save-dev style-loader\r\n\r\n$ npm install --save-dev css-loader\r\n\r\n$ npm install --save-dev babel-loader\r\n\r\n$ npm install --save-dev postcss-loader<\/pre>\n
After installing these modules you can see the folder ‘node_modules’ in your _dev folder.<\/p>\n
In _dev folder there is a file ‘webpack.config.js’ which is having the configuration for webpack.<\/p>\n
var webpack = require('webpack');\r\nvar path = require('path');\r\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\r\n\r\nvar plugins = [];\r\n\r\nvar production = false;\r\n\r\nif (production) {\r\n  plugins.push(\r\n    new webpack.optimize.UglifyJsPlugin({\r\n      compress: {\r\n        warnings: false\r\n      }\r\n    })\r\n  );\r\n}\r\n\r\nplugins.push(\r\n  new ExtractTextPlugin(\r\n    path.join(\r\n      '..', 'css', 'theme.css'\r\n    )\r\n  )\r\n);\r\n\r\nmodule.exports = {\r\n  entry: [\r\n    '.\/js\/theme.js'\r\n  ],\r\n  output: {\r\n    path: '..\/assets\/js',\r\n    filename: 'theme.js'\r\n  },\r\n  module: {\r\n    loaders: [{\r\n      test: \/\\.js$\/,\r\n      exclude: \/node_modules\/,\r\n      loaders: ['babel-loader']\r\n    }, {\r\n      test: \/\\.scss$\/,\r\n      loader: ExtractTextPlugin.extract(\r\n        \"style\",\r\n        \"css?sourceMap!postcss!sass?sourceMap\"\r\n      )\r\n    }, {\r\n      test: \/.(png|woff(2)?|eot|ttf|svg)(\\?[a-z0-9=\\.]+)?$\/,\r\n      loader: 'file-loader?name=..\/css\/[hash].[ext]'\r\n    }, {\r\n      test: \/\\.css$\/,\r\n      loader: \"style-loader!css-loader!postcss-loader\"\r\n    }]\r\n  },\r\n  postcss: function() {\r\n    return [require('postcss-flexibility')];\r\n  },\r\n  externals: {\r\n    prestashop: 'prestashop'\r\n  },\r\n  devtool: 'source-map',\r\n  plugins: plugins,\r\n  resolve: {\r\n    extensions: ['', '.js', '.scss']\r\n  }\r\n};<\/pre>\n
Now create your js or css file in _dev\/css\u00a0or _dev\/js file,<\/p>\n
Now, run these command to create compiled file in assets\/css and assets\/js file,<\/p>\n
In the directory, _dev run these commands,<\/p>\n
To build your assets once<\/p>\n
$ npm run build<\/pre>\n
 <\/p>\n
To rebuild your assets every time you change a file in the _dev folder<\/p>\n
$ npm run watch<\/pre>\n
You can see now the compiled file in your assets\/css or js folder.<\/p>\n
Troubleshoot\u00a0while run these commands,<\/p>\n
Error :: Module build failed: ReferenceError: Promise is not defined<\/p>\n