Vue - Remove specific JavaScript files for production mode

Question

I have lots of .js files to import in Vue components in my project. Some of these JavaScript files are meant to be used in development mode and they won't be included in production but I am not allowed to delete these files in project. For example;

There are two JavaScript files called authDev.js and authProd.js . Their usage is basically the same but their content are different from each other. Inside of these JavaScript files there are functions and I export them to be able to import in several Vue components.

The first question, If I dynamically export or import them, will webpack include these files when I run npm run build ? In other words, let's say I created a JavaScript file but I didn't export it, so I didn't import it to anywhere either. Does webpack understand that this JavaScript file is not used in anywhere of these Vue project and discard it when it builds my project to production? Or does it include every single file that existed in the project?

The second question, is there a way to tell the webpack that those JavaScript files will not be included in dist folder these will... I mean, can I specify files for development and production?

First I thought I could import or export them based on a condition but when I try to put my imports in if statements , it gives me an error and says "imports must be at the top level" . So I tried to export them dynamically but couldn't do it either.

Then I try to remove specific blocks of codes in files. There are packages and plugins to remove every console outputs from Vue projects but I couldn't find anything to remove or discard specific lines of codes.

At last, I decided to took a way to include and exclude specific files. Is there a way to do it? If it is, how do I do that? Thanks in advance.

THE SOLUTION (EDITED)

For a quick test, I created two .js files called auth-development.js and auth-production.js in src/assets/js/filename.js location. Here are the contents of them;

auth-production.js

export const auth = {
    authLink: "http://production.authlink/something/v1/",
    authText: "Production Mode"
}

auth-development.js

export const auth = {
    authLink: "http://localhost:8080/something/v1/",
    authText: "Development Mode"
}

Then I modified my webpack config which is in the vue.config.js file;

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
              'conditionalAuth': path.resolve(__dirname, `src/assets/js/auth-${process.env.NODE_ENV}.js`)
            }
          }
    }
  }

Vue was giving "path is undefined" error, I added the top part of the code to handle that error. I used process.env.NODE_ENV to get the words development and production to add the end of my javascript files so that I can define their path.

Then I dynamically imported this conditionalAuth to a test component called "HelloWorld" as follows;

<script>
import * as auth from 'conditionalAuth';

export default {
  name: 'HelloWorld',
  data(){
    return {
      auth: auth
    }
  }
}
</script>

And I used them like this;

<template>
  <div>
    <p>You are in the {{ auth.auth.authText}}</p>
    <p>{{ auth.auth.authLink }}</p>
  </div>
</template>

In this way when I npm run serve it imports auth-development.js but if I npm run build and try the index.html in the dist folder on a live server, it only imports the auth-production.js .

At last, when I check the final build, auth-development.js is not built for my dist version of the project. It only imports the production javascript file in the chunk.

Answer 1

Assuming the file names are: auth-development.js and auth-production.js , you can use webpack alias to import file according to environment.

 resolve: {
    alias: {
      'conditionalAuth': path.resolve(__dirname, `path/to/js/auth-${process.env.NODE_ENV}.js`)
    },
    extensions: ['.js', '.vue', '.json']
  }

then you should be able to import the desired file like:

import * as auth from 'conditionalAuth';