Using your own modules in the boilerplate

[Retroid]

The TLDR is: How do I import a .js file without webpack trying to lint/compile it with the boilerplate provided?

I am having trouble importing libraries I’ve manually included (as in, not installed through a package manager such as NPM). I would like to be able to import 'src/statics/library' with a .js file I’ve included in the directory structure. The issue is not how I would do this, I have already been able to successfully import files I created. The problem is with the loaders that attempt to lint the file or compile it from ES2015 to something the browsers can understand. I’ve added an exclude property to the eslint-loader, babel-loader and vue-loader in the following way exclude: /(node_modules|src\/statics)/

The file library.js is put in the src/statics directory for context.

[rstoenescu]

@Retroid Hi, sorry for the late reply. I see no reason why changing the exclude property to the one you mentioned would not make things work as you expect them to. Did you manage to pull it off?

[Retroid]

I made progress on this but never managed to figure it out. I think the issue is with babel and not the webpack configuration in the boilerplate app (so I think I’m asking for help in the wrong place/being off-topic). Thanks for the reply though!

Here is some more information for people who might be having similar problems, hopefully this might help someone. Exclude will only tell webpack to not use a loader on files that matched with test. This causes a problem with babel as we are both loading files into babel through the babel-loader and the vue-loader. We instead need to configure babel directly to tell it which files it should leave alone. You can do this with either the ignore or only properties in the options object. The best way to pass these into babel would be through the babelrc but, unfortunately, this doesn’t seem to work.