New webpack config

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 assets
+.env

package.json

@@ -4,8 +4,10 @@
   "description": "Tools to help while developing the Classic theme",
   "main": "index.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
-    "watch": "webpack --progress --colors --debug --display-chunks --watch",
+    "build-analyze": "webpack --progress --mode=production --analyze",
+    "build": "webpack --progress --mode=production",
+    "watch": "npm run dev",
+    "dev": "webpack serve --progress --mode=development",
     "scss-lint": "stylelint \"**/*.scss\" --formatter verbose",
     "scss-fix": "stylelint \"**/*.scss\" --fix",
     "lint": "eslint -c .eslintrc.js --ext .js,.vue ./js",
@@ -14,48 +16,47 @@
   "author": "PrestaShop",
   "license": "AFL-3.0",
   "devDependencies": {
-    "@babel/core": "^7.14.5",
-    "@types/jquery": "^3.5.6",
-    "@types/swiper": "^5.4.2",
     "autoprefixer": "^6.7.7",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.2.2",
     "bootstrap": "5.0.1",
     "bootstrap-touchspin": "^4.3.0",
     "bourbon": "^7.0.0",
-    "css-loader": "^5.2.5",
+    "css-loader": "^5.2.7",
+    "css-minimizer-webpack-plugin": "^3.1.1",
+    "dotenv": "^10.0.0",
+    "esbuild-loader": "^2.16.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prestashop": "0.1.0",
     "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-import": "^2.20.0",
-    "expose-loader": "^0.7.5",
+    "expose-loader": "^3.0.0",
     "file-loader": "^6.2.0",
-    "flexibility": "^1.0.5",
-    "jquery": "^3.5.1",
-    "jquery-touchswipe": "^1.6",
-    "jquery.browser": "^0.1.0",
-    "manrope": "^2.0.0",
-    "material-design-icons-iconfont": "^5.0.1",
-    "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^5.0.0",
-    "postcss-flexibility": "^1.0.2",
-    "postcss-loader": "^3.0.0",
+    "fork-ts-checker-webpack-plugin": "^6.3.4",
+    "hot-accept-webpack-plugin": "^2.0.0-beta.7",
+    "mini-css-extract-plugin": "^1.6.2",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.3.9",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
     "sass-loader": "^12.1.0",
-    "style-loader": "^0.14.0",
     "stylelint": "^12.0.0",
     "stylelint-config-prestashop": "^1.0.5",
-    "tether": "^1.1.1",
-    "ts-loader": "^9.2.3",
     "typescript": "^4.3.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "velocity-animate": "^1.2.3",
-    "webpack": "^5.36.2",
-    "webpack-cli": "^3.3.10",
+    "webpack": "^5.58.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1",
+    "webpack-merge": "^5.8.0",
     "webpack-sources": "^0.1.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.9.2"
+    "@popperjs/core": "^2.9.2",
+    "@types/jquery": "^3.5.6",
+    "jquery": "^3.5.1",
+    "jquery-touchswipe": "^1.6",
+    "jquery.browser": "^0.1.0",
+    "manrope": "^2.0.0",
+    "material-design-icons-iconfont": "^5.0.1"
   }
 }

src/js/theme.js

@@ -23,7 +23,6 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  */
 /* eslint-disable */
-import 'expose-loader?Tether!tether';
 import 'bootstrap/dist/js/bootstrap.min';
 import prestashop from 'prestashop';
 import EventEmitter from 'events';

webpack.config.js

@@ -22,102 +22,25 @@
  * @copyright Since 2007 PrestaShop SA and Contributors
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  */
-const webpack = require('webpack');
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
-let config = {
-  entry: {
-    theme: ['./src/js/theme.js', './src/css/theme.scss'],
-    error: ['./src/css/error.scss'],
-  },
-  output: {
-    path: path.resolve(__dirname, 'assets/js'),
-    filename: '[name].js',
-  },
-  module: {
-    rules: [
-      {
-    test: require.resolve('jquery'),
-    use: [{
-        loader: 'expose-loader',
-        options: 'jQuery'
-    },{
-        loader: 'expose-loader',
-        options: '$'
-    }]
-  },
-      {
-        test: /\.ts?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.js/,
-        loader: 'babel-loader',
-      },
-      {
-        test: /\.scss$/,
-        use:[ 
-            MiniCssExtractPlugin.loader,
-            'css-loader',
-            'postcss-loader',
-            'sass-loader',
-          ],
-      },
-      {
-        test: /.(png|woff(2)?|eot|otf|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '../css/[hash].[ext]',
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader'],
-      },
-    ],
-  },
-  externals: {
-    prestashop: 'prestashop',
-    $: '$',
-    jquery: 'jQuery',
-  },
-  plugins: [
-    new MiniCssExtractPlugin({filename: path.join('..', 'css', '[name].css')}),
-    new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery'
-    })
-  ]
-};
+const { webpackVars } = require('./webpack/webpack.vars.js');
+const { commonConfig } = require('./webpack/webpack.common.js');
+const { productionConfig } = require('./webpack/webpack.production.js');
+const { developmentConfig } = require('./webpack/webpack.development.js');
+const { merge } = require('webpack-merge');
 
-if (process.env.NODE_ENV === 'production') {
-  config.optimization = {
-    minimizer: [
-      new UglifyJsPlugin({
-        sourceMap: false,
-        uglifyOptions: {
-          compress: {
-            sequences: true,
-            conditionals: true,
-            booleans: true,
-            if_return: true,
-            join_vars: true,
-            drop_console: true,
-          },
-          output: {
-            comments: false,
-          },
-        }
-      })
-    ]
+const getConfig = ({mode, ...vars}) => {
+  switch (mode) {
+    case 'production':
+      return merge(commonConfig({mode, ...vars}), productionConfig({mode, ...vars}));
+    case 'development':
+      return merge(commonConfig({mode, ...vars}), developmentConfig({mode, ...vars}));
+    default:
+      throw new Error(`Trying to use an unknown mode, ${mode}`);
   }
-}
+};
 
-module.exports = config;
+module.exports = (env, options) => getConfig({
+  mode: options.mode,
+  ...webpackVars
+});

webpack/.env-example

@@ -0,0 +1,4 @@
+PORT=3505
+SERVER_ADDRESS=domain.local
+SITE_URL=http://domain.local
+PUBLIC_PATH=/themes/theme-refacto/assets/

webpack/webpack.common.js

@@ -0,0 +1,19 @@
+const { extractScss, extractJs, extractImages, extractFonts, externals, expose } = require('./webpack.parts');
+const { merge } = require('webpack-merge');
+
+exports.commonConfig = ({ mode, port, publicPath, siteURL, getOutput, getEntry, entriesArray }) => (
+  merge(
+    {
+      mode,
+      entry: getEntry(entriesArray),
+      output: getOutput({ mode, publicPath, siteURL, port }),
+      target: 'web',
+    },
+    externals(),
+    expose(),
+    extractScss({ mode }),
+    extractJs(),
+    extractImages(),
+    extractFonts(),
+  )
+);

webpack/webpack.development.js

@@ -0,0 +1,14 @@
+const { configureDevServer } = require('./webpack.parts');
+const { HotAcceptPlugin } = require('hot-accept-webpack-plugin');
+const webpack = require('webpack');
+
+exports.developmentConfig = ({ port, publicPath, serverAddress, siteURL, entriesArray }) => ({
+  devtool: "cheap-source-map",
+  devServer: configureDevServer(serverAddress, publicPath, port, siteURL),
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HotAcceptPlugin({
+      test: Object.keys(entriesArray).map(el => `${el}.js`)
+    })
+  ]
+});