Webpack is a module bundler which takes modules with dependencies and generates static assets that represent those modules. In order to use Webpack in Prestashop 1.7, you need to carry out the following actions:
1. Download and install Node.js:
- Win or MacOS: download the installer from the website nodejs.org.
- Debian and Ubuntu:
|
1 2 |
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash - sudo apt-get install -y nodejs |
2. In the directory in Prestashop go to the _dev folder.
3. Perform in the command line: npm install
4. Then you have a choice:
- To build your assets, enter npm run build
- To rebuild assets every time when the file is changed in the /themes/%themename%/_dev/ folder, enter npm run watch
The Webpack configuration file for StarterTheme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var plugins = []; plugins.push( new ExtractTextPlugin('../css/theme.css') ); module.exports = [{ // JavaScript entry: [ './js/theme.js' ], output: { path: '../assets/js', filename: 'theme.js' }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }] }, externals: { prestashop: 'prestashop' }, plugins: plugins, resolve: { extensions: ['', '.js'] } }, { // CSS entry: [ './css/normalize.css', './css/example.less', './css/st/dev.styl', './css/theme.scss' ], output: { path: '../assets/js', filename: 'theme.js' }, module: { loaders: [{ test: /\.scss$/, loader: ExtractTextPlugin.extract( "style", "css-loader?sourceMap!postcss!sass-loader?sourceMap" ) }, { test: /\.styl$/, loader: ExtractTextPlugin.extract( "style", "css-loader?sourceMap!postcss!stylus-loader?sourceMap" ) }, { test: /\.less$/, loader: ExtractTextPlugin.extract( "style", "css-loader?sourceMap!postcss!less-loader?sourceMap" ) }, { test: /\.css$/, loader: ExtractTextPlugin.extract( 'style', 'css-loader?sourceMap!postcss-loader' ) }, { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'file-loader?name=../css/[hash].[ext]' }] }, plugins: plugins, resolve: { extensions: ['', '.scss', '.styl', '.less', '.css'] } }]; |
Looking for an experienced ecommerce development partner? Turn to BelVG!
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
