CODEWITHSUNDEEP
javascriptnode.jswebpackecmascript-6babeljs
Jonathan Doliver
Jonathan Doliver

Reputation: 51

How can I build with Babel (while preserving the source's folder structure) with Webpack?

I have a project with a hierarchy something like this:

-src/ -app.js (only accesses server-side code) -server/ -models/ -routes/ ... -client/ -views/ -scss/ -style1.scss -style2.scss ... -js/ -index.js (es6) -other-page.js (es6) ... ... -.babelrc -package.json -webpack.config.js ...

and I want Webpack to copy everything within src, replacing .js files with Babel-compiled equivalents, and replacing .scss files with compiled CSS. Like this:

-dist/ -app.js -server/ -models/ -routes/ ... -client/ -views/ -css/ -style1.css -style2.css -js/ -index.js (now compiled) -other-page.js (now compiled) ... ...

There are non-js files within src/server/, so I don't think it's possible to combine everything inside of it into app.js. Still, any help would be appreciated regarding my question.

Upvotes: 3

Views: 845

Answers (1)

Kevin Oh
Kevin Oh

Reputation: 11

Webpack may be the wrong tool for the job. It is self-described as being a module bundler so its feature-set is very strictly focused towards that end: bundling things together. I think gulp would be better for something like this.

But however, what is your reason for wanting to do this?

As an aside: if you really had to do it this way, you may be able to do it with copy-webpack-plugin, which is able to copy files and folders to other destinations. There is a transform property that the plugin accepts where you can pass in a function. I can't readily think of how it would work, but perhaps you can do something there. Again, I don't know why you would need to implement it precisely this way though.

Upvotes: 1

Related Questions