Use Webpack Encore

app/AppKernel.php

@@ -35,6 +35,7 @@ class AppKernel extends Kernel
             new Http\HttplugBundle\HttplugBundle(),
             new Sentry\SentryBundle\SentryBundle(),
             new Twig\Extra\TwigExtraBundle\TwigExtraBundle(),
+            new Symfony\WebpackEncoreBundle\WebpackEncoreBundle(),
         ];
 
         if (in_array($this->getEnvironment(), ['dev', 'test'], true)) {

app/config/config.yml

@@ -33,7 +33,8 @@ framework:
         cookie_secure: auto
     fragments: ~
     http_method_override: true
-    assets: ~
+    assets:
+        json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
     mailer:
         dsn: "%mailer_dsn%"
     http_client:
@@ -469,3 +470,8 @@ craue_config:
 when@dev:
     maker:
         root_namespace: 'Wallabag'
+
+webpack_encore:
+    output_path: '%kernel.project_dir%/web/build'
+    script_attributes:
+        defer: true

app/config/config_prod.yml

@@ -1,10 +1,6 @@
 imports:
     - { resource: config.yml }
 
-framework:
-    assets:
-        # json_manifest_path: '%kernel.project_dir%/web/bundles/wallabagcore/manifest.json'
-
 #doctrine:
 #    orm:
 #        metadata_cache_driver: apc

app/config/webpack/common.js

@@ -1,37 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-
-const projectDir = path.resolve(__dirname, '../../../');
-
-module.exports = {
-  entry: {
-    main: path.join(projectDir, './assets/index.js'),
-    public: path.join(projectDir, './assets/share.js'),
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(projectDir, 'web/build'),
-    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',
-      files: '**/*.scss',
-    }),
-  ],
-  resolve: {
-    alias: {
-      jquery: path.join(projectDir, 'node_modules/jquery/dist/jquery.js'),
-    },
-  },
-};

app/config/webpack/dev.js

@@ -1,58 +0,0 @@
-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: './web',
-    },
-  },
-  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',
-      },
-    ],
-  },
-});

app/config/webpack/prod.js

@@ -1,98 +0,0 @@
-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',
-      },
-      {
-        test: /\.(eot|ttf|woff|woff2)$/,
-        type: 'asset/resource',
-        generator: {
-          filename: 'fonts/[name][ext]',
-        },
-      },
-    ],
-  },
-});