vihanb / babel-plugin-wildcard

Wildcard imports import a directories JS files
MIT License
186 stars 27 forks source link

Unable to get this working with Vue SFC (Single File Components, *.vue files) #22

Closed chamberlainpi closed 6 years ago

chamberlainpi commented 6 years ago

I placed this in my Webpack configuration (and I also have the .babelrc config file containing the "plugins": ["wildcard"] setting, but still no dice.

{
    entry: {
        'bundle': '......./js/entry.js',
    },

    output: {
        path: path.resolve($$$.paths.dist),
        filename: "[name].js"
    },

    module: {
        rules: [
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
            { test: /\.vue$/, use: [ 'vue-loader' ] },
            { test: /\.js$/, use: {
                loader: 'babel-loader',
                options: {
                    babelrc: true,
                    presets: ['@babel/preset-env'],
                }
            }},
        ]
    }
}

Then in my entry.js file, I'm trying to populate a "pages" variable with all the *.vue files with this, but it fails (results an empty object):

import * as pages from '../vue/page-*';

Do I have to add some file-extensions to the config or something?

chamberlainpi commented 6 years ago

Nevermind! Had to read more near the bottom regarding the "exts" option. What ended up fixing it was configuring my .babelrc file like this:

{
  "presets": ["@babel/preset-env"],
  "plugins": [['wildcard', {
      'exts': ["js", "vue"]   <-- this guy!
    }]
  ]
}

...then boom! Everything fell into place. Thanks for this awesome plugin!