Move to Symfony Flex

The structure changed completely.
Bundles are gone. Everything is flatten in the folder `src`.
I separated import & api controllers to avoid _pollution_ in the main controller folder.

scripts/webpack/common.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const webpack = require('webpack');
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+
+const rootDir = path.resolve(__dirname, '../../');
+
+module.exports = {
+  entry: {
+    material: path.join(rootDir, './assets/themes/material/index.js'),
+    public: path.join(rootDir, './assets/themes/_global/share.js'),
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(rootDir, 'public/wallassets'),
+    publicPath: '',
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.$': 'jquery',
+      'window.jQuery': 'jquery',
+    }),
+    new StyleLintPlugin({
+      configFile: 'stylelint.config.js',
+      failOnError: false,
+      quiet: false,
+      context: 'assets/themes',
+      files: '**/*.scss',
+    }),
+  ],
+  resolve: {
+    alias: {
+      jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js'),
+    },
+  },
+};

scripts/webpack/dev.js

@@ -0,0 +1,58 @@
+const { merge } = require('webpack-merge');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const commonConfig = require('./common');
+
+module.exports = merge(commonConfig, {
+  devtool: 'eval-source-map',
+  output: {
+    filename: '[name].dev.js',
+  },
+  mode: 'development',
+  devServer: {
+    static: {
+      directory: './public',
+    },
+  },
+  plugins: [
+    new ESLintPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.(s)?css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: ['autoprefixer'],
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(jpg|png|gif|svg|ico|eot|ttf|woff|woff2)$/,
+        type: 'asset/inline',
+      },
+    ],
+  },
+});

scripts/webpack/prod.js

@@ -0,0 +1,101 @@
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const commonConfig = require('./common');
+
+module.exports = merge(commonConfig, {
+  output: {
+    filename: '[name].js',
+  },
+  mode: 'production',
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
+  plugins: [
+    new ESLintPlugin(),
+    new MiniCssExtractPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new WebpackManifestPlugin({
+      fileName: 'manifest.json',
+      sort: (file1, file2) => file1.path.localeCompare(file2.path),
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: ['autoprefixer'],
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(jpg|png|gif|svg|ico)$/,
+        include: /node_modules/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name][ext]',
+        },
+      },
+      {
+        test: /\.(jpg|png|gif|svg|ico)$/,
+        exclude: /node_modules/,
+        type: 'asset/resource',
+        generator: {
+          filename: (content) => content.filename.replace('app/Resources/static/', ''),
+        },
+      },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
+      },
+    ],
+  },
+});