tethys.backend/webpack.config_a.cjs

const { join } = require("path");
const Encore = require("@symfony/webpack-encore");
const { VueLoaderPlugin } = require('vue-loader');
const dotenv = require('dotenv-webpack');

// Load the environment variables from the.env file
Encore.addPlugin(
    new dotenv({
      path: ".env",
      defaults: ".env",
      systemvars: true,
      allowEmptyValues: true,
    })
  )
  
/*
|--------------------------------------------------------------------------
| Encore runtime environment
|--------------------------------------------------------------------------
*/
if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || "dev");
}

/*
|--------------------------------------------------------------------------
| Output path
|--------------------------------------------------------------------------
|
| The output path for writing the compiled files. It should always
| be inside the public directory, so that AdonisJS can serve it.
|
*/
Encore.setOutputPath("./public/assets");

/*
|--------------------------------------------------------------------------
| Public URI
|--------------------------------------------------------------------------
|
| The public URI to access the static files. It should always be
| relative from the "public" directory.
|
*/
Encore.setPublicPath("/assets");

/*
|--------------------------------------------------------------------------
| Entrypoints
|--------------------------------------------------------------------------
|
| Entrypoints are script files that boots your frontend application. Ideally
| a single entrypoint is used by majority of applications. However, feel
| free to add more (if required).
|
| Also, make sure to read the docs on "Assets bundler" to learn more about
| entrypoints.
|
*/
Encore.addEntry("app", "./resources/js/app.js");

/*
|--------------------------------------------------------------------------
| Copy assets
|--------------------------------------------------------------------------
|
| Since the edge templates are not part of the Webpack compile lifecycle, any
| images referenced by it will not be processed by Webpack automatically. Hence
| we must copy them manually.
|
*/
// Encore.copyFiles({
//   from: './resources/images',
//   to: 'images/[path][name].[hash:8].[ext]',
// })

/*
|--------------------------------------------------------------------------
| Split shared code
|--------------------------------------------------------------------------
|
| Instead of bundling duplicate code in all the bundles, generate a separate
| bundle for the shared code.
|
| https://symfony.com/doc/current/frontend/encore/split-chunks.html
| https://webpack.js.org/plugins/split-chunks-plugin/
|
*/
// Encore.splitEntryChunks()

/*
|--------------------------------------------------------------------------
| Isolated entrypoints
|--------------------------------------------------------------------------
|
| Treat each entry point and its dependencies as its own isolated module.
|
*/
Encore.disableSingleRuntimeChunk();

/*
|--------------------------------------------------------------------------
| Cleanup output folder
|--------------------------------------------------------------------------
|
| It is always nice to cleanup the build output before creating a build. It
| will ensure that all unused files from the previous build are removed.
|
*/
Encore.cleanupOutputBeforeBuild();

/*
|--------------------------------------------------------------------------
| Source maps
|--------------------------------------------------------------------------
|
| Enable source maps in production
|
*/
Encore.enableSourceMaps(!Encore.isProduction());

/*
|--------------------------------------------------------------------------
| Assets versioning
|--------------------------------------------------------------------------
|
| Enable assets versioning to leverage lifetime browser and CDN cache
|
*/
Encore.enableVersioning(Encore.isProduction());

/*
|--------------------------------------------------------------------------
| Configure dev server
|--------------------------------------------------------------------------
|
| Here we configure the dev server to enable live reloading for edge templates.
| Remember edge templates are not processed by Webpack and hence we need
| to watch them explicitly and livereload the browser.
|
*/
Encore.configureDevServerOptions((options) => {
  /**
   * Normalize "options.static" property to an array
   */
  if (!options.static) {
    options.static = [];
  } else if (!Array.isArray(options.static)) {
    options.static = [options.static];
  }

  /**
   * Enable live reload and add views directory
   */
  options.liveReload = true;
  options.static.push({
    directory: join(__dirname, "./resources/views"),
    watch: true,
  });
});

/*
|--------------------------------------------------------------------------
| CSS precompilers support
|--------------------------------------------------------------------------
|
| Uncomment one of the following lines of code to enable support for your
| favorite CSS precompiler
|
*/
// Encore.enableSassLoader()
// Encore.enableLessLoader()
// Encore.enableStylusLoader()

/*
|--------------------------------------------------------------------------
| CSS loaders
|--------------------------------------------------------------------------
|
| Uncomment one of the following line of code to enable support for
| PostCSS or CSS.
|
*/
Encore.enablePostCssLoader()
// Encore.configureCssLoader(() => {})

/*
|--------------------------------------------------------------------------
| Enable Vue loader
|--------------------------------------------------------------------------
|
| Uncomment the following lines of code to enable support for vue. Also make
| sure to install the required dependencies.
|
*/
// Encore.enableVueLoader(() => {}, {
//   version: 3,
//   runtimeCompilerBuild: false,
//   useJsx: false
// });

Encore.addLoader({
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
      // loaders: {
      // 	ts: 'ts-loader',
      // },
      cacheDirectory: 'C:\\Users\\kaiarn\\Documents\\Software\\tethys.viewer\\node_modules\\.cache\\vue-loader',
      cacheIdentifier: 'f930df3e',
      babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy'],
  },
}).addPlugin(new VueLoaderPlugin());


    Encore.enableTypeScriptLoader(config => {
    	 // Loader-specific options
    	config.configFile = 'tsconfig.vue.json';
    	config.appendTsSuffixTo = [/\.vue$/];
    	config.transpileOnly = true;
    	config.happyPackMode = false;
    }, {
    	// Directly change the exclude rule
    	exclude: /node_modules/,

    })
    .addAliases({
        '@': join(__dirname, 'resources/js'),
        'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    })
    .configureDefinePlugin((options) => {
        options['__VUE_OPTIONS_API__'] = true;
        options['__VUE_PROD_DEVTOOLS__'] = false;
    })
.addAliases({
  '@': join(__dirname, 'resources/js'),
  'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
})
.configureDefinePlugin((options) => {
  options['__VUE_OPTIONS_API__'] = true;
  options['__VUE_PROD_DEVTOOLS__'] = false;
});
/*
|--------------------------------------------------------------------------
| Configure logging
|--------------------------------------------------------------------------
|
| To keep the terminal clean from unnecessary info statements , we only
| log warnings and errors. If you want all the logs, you can change
| the level to "info".
|
*/
const config = Encore.getWebpackConfig();
config.infrastructureLogging = {
  level: "warn",
};
config.stats = "errors-warnings";
config.resolve.extensions = ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'];
/*
|--------------------------------------------------------------------------
| Export config
|--------------------------------------------------------------------------
|
| Export config for webpack to do its job
|
*/
module.exports = config;