webpack: allow to build and watch js

webpack.config.js

@@ -1,79 +1,89 @@
+const path = require('path')
+const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
 
+const rules = require('./webpack.rules.js')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 
+const appName = 'side_menu'
+const buildMode = process.env.NODE_ENV
+const isDev = buildMode === 'development'
 
-const Encore = require('@symfony/webpack-encore');
+module.exports = {
+  target: 'web',
+  mode: buildMode,
+  entry: {
+    menu: path.resolve(path.join('src', 'menu.js')),
+    // admin: path.resolve(path.join('src', 'admin.js')),
+  },
+  output: {
+    path: path.resolve('./js'),
+    publicPath: path.join('/apps/', appName, '/js/'),
 
-// Manually configure the runtime environment if not already configured yet by the "encore" command.
-// It's useful when you use tools that rely on webpack.config.js file.
-if (!Encore.isRuntimeEnvironmentConfigured()) {
-    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+    // Output file names
+    filename: `${appName}-[name].js?v=[contenthash]`,
+    chunkFilename: `${appName}-[name].js?v=[contenthash]`,
+
+    // Clean output before each build
+    clean: true,
+  },
+
+  optimization: {
+    chunkIds: 'named',
+    splitChunks: {
+      automaticNameDelimiter: '-',
+    },
+    minimize: !isDev,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false,
+          }
+        },
+        extractComments: true,
+      }),
+    ],
+  },
+
+  module: {
+    rules: Object.values(rules),
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+
+    // Make sure we auto-inject node polyfills on demand
+    // https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
+    new NodePolyfillPlugin({
+      // Console is available in the web-browser
+      excludeAliases: ['console'],
+    }),
+
+    // @nextcloud/moment since v1.3.0 uses `moment/min/moment-with-locales.js`
+    // Which works only in Node.js and is not compatible with Webpack bundling
+    // It has an unused function `localLocale` that requires locales by invalid relative path `./locale`
+    // Though it is not used, Webpack tries to resolve it with `require.context` and fails
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^\.[/\\]locale$/,
+      contextRegExp: /moment[/\\]min$/,
+    }),
+
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
+
+  resolve: {
+    extensions: ['.*', '.mjs', '.js', '.vue'],
+    symlinks: false,
+    // Ensure npm does not duplicate vue dependency, and that npm link works for vue 3
+    // See https://github.com/vuejs/core/issues/1503
+    // See https://github.com/nextcloud/nextcloud-vue/issues/3281
+    alias: {
+      'vue$': path.resolve('./node_modules/vue')
+    },
+  },
 }
 
-Encore
-    // directory where compiled assets will be stored
-    .setOutputPath('[ext]')
-    // public path used by the web server to access the output path
-    .setPublicPath('/static')
-    // only needed for CDN's or subdirectory deploy
-    .setManifestKeyPrefix('build/')
-
-    /*
-     * ENTRY CONFIG
-     *
-     * Each entry will result in one JavaScript file (e.g. app.js)
-     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
-     */
-    .addEntry('admin', './src/admin.js')
-    .addEntry('menu', './src/menu.js')
-
-    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
-    .splitEntryChunks()
-
-    // will require an extra script tag for runtime.js
-    // but, you probably want this, unless you're building a single-page app
-    .enableSingleRuntimeChunk()
-
-    /*
-     * FEATURE CONFIG
-     *
-     * Enable & configure other features below. For a full
-     * list of features, see:
-     * https://symfony.com/doc/current/frontend.html#adding-more-features
-     */
-    .cleanupOutputBeforeBuild()
-    // .enableBuildNotifications()
-    .enableVueLoader(() => {}, {
-    })
-    .enableSourceMaps(!Encore.isProduction())
-    // enables hashed filenames (e.g. app.abc123.css)
-    .enableVersioning(Encore.isProduction())
-
-    .configureBabel((config) => {
-        config.plugins.push('@babel/plugin-syntax-dynamic-import');
-    })
-
-    .copyFiles({
-        from: './img',
-        to: 'dist/img/[path][name].[ext]'
-    })
-
-    // enables Sass/SCSS support
-    .enableSassLoader()
-
-    // uncomment if you use TypeScript
-    //.enableTypeScriptLoader()
-
-    // uncomment if you use React
-    //.enableReactPreset()
-
-    // uncomment to get integrity="..." attributes on your script & link tags
-    // requires WebpackEncoreBundle 1.4 or higher
-    //.enableIntegrityHashes(Encore.isProduction())
-
-    // uncomment if you're having problems with a jQuery plugin
-    //.autoProvidejQuery()
-;
-
-console.log(Encore.getWebpackConfig())
-
-module.exports = Encore.getWebpackConfig();

webpack.rules.js

@@ -0,0 +1,19 @@
+module.exports = {
+  scss: {
+    test: /\.scss$/,
+    use: ['style-loader', 'css-loader', 'sass-loader'],
+  },
+  vue: {
+    test: /\.vue$/,
+    loader: 'vue-loader',
+  },
+  js: {
+    test: /\.js$/,
+    loader: 'babel-loader',
+    exclude: /node_modules/,
+  },
+  assets: {
+    test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
+    type: 'asset/inline',
+  },
+}