first commit

themes/ayon_/_dev/_webpack/util.js

@@ -0,0 +1,30 @@
+const mapObject = obj => fn => Object.keys(obj).map(key => fn(obj[key], key));
+
+module.exports = {
+	browserSyncPort: 3000, // The port on which the server browserSync will be launched
+	browserSyncOpen: true, // Auto open browserSync URL in browser
+	browserSyncTarget: "https://ayon.dev/", // URL of your server prestashop (example: "http://localhost:8080/ps/" or "http://remote-server.com")
+	themeFolderName: 'ayon', // folder name your theme
+
+	outputFolderName: 'assets/js',
+	get publicPath(){
+		return `https://localhost:${this.browserSyncPort}/themes/${this.themeFolderName}/${this.outputFolderName}/`;
+		// check public path to 'outputFolderName'
+		// if you use next 'browserSyncTarget'
+		// browserSyncTarget: "http://localhost:8080/ps/"
+		// That publicPath will be such
+		// `http://localhost:${this.browserSyncPort}/ps/themes/${this.themeFolderName}/${this.outputFolderName}/`
+	},
+	DEV: process.env.NODE_ENV !== "production",
+
+	addHotMiddleware(entry) {
+		const newEntry = {};
+
+		mapObject(entry)((val, name) => {
+			val = (Array.isArray(val) ? val : [val]).slice();
+			val.unshift("webpack/hot/dev-server", "webpack-hot-middleware/client");
+			newEntry[name] = val;
+		});
+		return newEntry;
+	}
+};

themes/ayon_/_dev/_webpack/webpack.default.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const {DEV, outputFolderName} = require('./util.js');
+
+let config = {
+  entry: {
+    main: [
+      './js/theme.js',
+      './css/theme.scss'
+    ]
+  },
+  output: {
+    path: path.resolve(__dirname, `../../${outputFolderName}/`),
+    filename: 'theme.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                minimize: !DEV
+              }
+            },
+            'postcss-loader',
+            'sass-loader'
+          ]
+        })
+      },
+      {
+        test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '../css/[hash].[ext]'
+            }
+          }
+        ]
+      },
+      {
+        test : /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader']
+      }
+    ]
+  },
+  externals: {
+    prestashop: 'prestashop',
+    $: '$',
+    jquery: 'jQuery'
+  },
+  plugins: [
+    new ExtractTextPlugin({
+      filename: path.join('..', 'css', 'theme.css'),
+      allChunks: true,
+      disable: DEV
+    })
+  ]
+};
+
+module.exports = config;

themes/ayon_/_dev/_webpack/webpack.development.js

@@ -0,0 +1,59 @@
+const { resolve } = require("path");
+const { sync: delSync } = require("del");
+const { HotModuleReplacementPlugin } = require("webpack");
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
+const BrowserSyncHotPlugin = require("browser-sync-dev-hot-webpack-plugin");
+
+const {publicPath, browserSyncPort, browserSyncOpen, browserSyncTarget, themeFolderName} = require('./util.js');
+
+module.exports = {
+	output: {
+		publicPath
+	},
+	plugins: [
+		{
+			apply(){
+				delSync([
+					resolve(__dirname, `../../assets/css/theme.css`)
+				], {force: true});
+			}
+		},
+		new HotModuleReplacementPlugin(),
+		new BrowserSyncHotPlugin({
+			browserSync: {
+				port: browserSyncPort,
+				open: browserSyncOpen,
+				reloadDelay: 500,
+				proxy: {
+					target: browserSyncTarget
+				},
+				plugins: [
+					{
+						module: "bs-html-injector",
+						options: {
+							files: [
+								/* pwd() + */"../templates/**/*.tpl",
+								/* pwd() + */'../modules/**/*.tpl'
+							]
+						}
+					}
+				]
+			},
+			devMiddleware: {
+				publicPath,
+				stats: { colors: true, chunck: false },
+				hot: true
+			},
+			hotMiddleware: {}
+		}),
+		new HardSourceWebpackPlugin({
+			cacheDirectory: `${resolve(__dirname, "../node_modules/.cache/hard-source/")}[confighash]`,
+			recordsPath: `${resolve(__dirname, "../node_modules/.cache/hard-source/")}[confighash]/records.json`,
+			configHash: require("node-object-hash")({ sort: false }).hash
+		}),
+		new BundleAnalyzerPlugin({
+			openAnalyzer: false
+		}),
+	]
+};

themes/ayon_/_dev/_webpack/webpack.production.js

@@ -0,0 +1,40 @@
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+
+module.exports = {
+  plugins: [
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        mangle: true,
+        compress: {
+          arrows: false,
+          booleans: false,
+          collapse_vars: false,
+          comparisons: false,
+          computed_props: false,
+          hoist_funs: false,
+          hoist_props: false,
+          hoist_vars: false,
+          if_return: false,
+          inline: false,
+          join_vars: false,
+          keep_infinity: true,
+          loops: false,
+          negate_iife: false,
+          properties: false,
+          reduce_funcs: false,
+          reduce_vars: false,
+          sequences: false,
+          side_effects: false,
+          switches: false,
+          top_retain: false,
+          toplevel: false,
+          typeofs: false,
+          unused: false,
+          conditionals: true,
+          dead_code: true,
+          evaluate: true
+        }
+      }
+    })
+  ]
+};