Is there a way to prevent certain folders that have .vue files from being included in the VueJS build process?

Question

Is there a way to prevent certain folders that have .vue files from being included in the VueJS build process?

https://i.sstatic.net/YU1rB.png

module.exports = {
  presets: [
    '@vue/app'
  ],
  module:{
    rules: [
      {
        test: /\.vue$/,
        exclude: [
          './src/components/Homepages/number1',
          './src/components/Homepages/number2'
        ]
      }
    ]
  }
}

I have a specific requirement where I need to conditionally include only one of 'Homepages/number1', 'Homepages/number2', 'Homepages/number3' folders in my project while excluding the others when running npm run build. This is to reduce the size of my dist folder. I've tried the code above in my babel.config.js file, but I'm not confident it's the correct solution. Any advice or suggestions would be greatly appreciated.

javascript webpack build vuejs2

Answer 1

Answer №1

If you're looking for a solution, the Copy plugin could be a good option:

In your webpack configuration file:
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.posix.join(
            path.resolve(__dirname, "src").replace(/\\/g, "/"),
            "**/*"
          ),
          globOptions: {
            ignore: [
              // Exclude all `txt` files
              "**/*.txt",
              // Exclude all files within subdirectories
              "**/subdir/**",
            ],
          },
        },
      ],
    }),
  ],
};

Answer 2

If you're looking for a solution, the Copy plugin could be a good option:

In your webpack configuration file:
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.posix.join(
            path.resolve(__dirname, "src").replace(/\\/g, "/"),
            "**/*"
          ),
          globOptions: {
            ignore: [
              // Exclude all `txt` files
              "**/*.txt",
              // Exclude all files within subdirectories
              "**/subdir/**",
            ],
          },
        },
      ],
    }),
  ],
};

Is there a way to prevent certain folders that have .vue files from being included in the VueJS build process?

Answer №1

Similar questions

Delete all offspring nodes from the Google organization chart

React component stuck in endless loop due to Intersection Observer

How can Node.js and Express be used to conceal Javascript code on the backend?

How to Use jQuery in Thymeleaf to Toggle All Checkboxes

Showing skeleton placeholders while waiting for the completion of an Array map function in React

In React/Next.js, it seems that pressing the useState button twice is required in order for an event to trigger

Incorporating OpenRouteService into an Angular application on Stackbliz

Determine the quantity of items that meet specific criteria

Texture mapping in THREE.JS can be applied to ExtrudeGeometry for enhancing the appearance

Using vue.js to make an HTTP GET request to a web API URL and display

A guide on adding a hyperlink to a table in Node.js using officegen

Ways to halt a message callback?

In what way does this closure cause componentDidUpdate to mimic the behavior of useEffect?

Guide to accessing the content within an h1 tag with JavaScript

Can a Set (or Map) be held in a "frozen" state?

The loading of content will happen only after the fadeOut effect

Passing props down in Next.js when working with children components

the drawbacks of using mixins as outlined in Vue's official documentation

Tips for exchanging JSON data between HTML and PHP using jQuery Ajax?

Vue component with a variable number of rows, each containing a variable number of input fields