How to process each file without bundling?

[metabacalhau]

I do not want to use neither bundles nor chunks, I just want to process each of the files within "require" and to keep them at them their respective folder. The folders structure is as follows:

Before webpack

• project
  • api
    • authenticationApi.ts
    • userApi.ts
  • components
    • chart
      • chart.scss
      • chart.ts
    • textbox
      • textbox.scss
      • textbox.ts
  • libraries
    • jquery
      • jquery.js
  • pages
    • index
      • index.ts
    • users
      • users.ts
• webpack.config.js

After webpack

• project
  • api
    • authenticationApi.ts
    • authenticationApi.js
    • userApi.ts
    • userApi.js
  • components
    • chart
      • chart.scss
      • chart.css
      • chart.ts
    • textbox
      • textbox.scss
      • textbox.css
      • textbox.ts
  • libraries
    • jquery
      • jquery.js
  • pages
    • index
      • index.ts
      • index.js
    • users
      • users.ts
      • index.js
• webpack.config.js

My idea is to create a config file for webpack, configure the loaders and run webpack to process all of the files in the project folder and to output the result of each ".ts" (will produce ".js"), ".scss" (will produce ".css") at their respective paths. Is this possible to do with Webpack? Sorry for asking this, but I couldn't find any answer to my question and yet I don't really know if the Webpack is the right tool for my project. Thanks in advance for your help.

[bebraw]

That would be challenging to pull off.

One idea - generate entries through a glob. Use [name] at output. Maybe force output to UMD format as well.

I'm not sure if this gives you exactly the kind of output you are looking for but it could be worth a go. Before globbing you could process a single file and see how it goes. If that works, generalize.

[helloyou2012]

@desperate-man you can use glob to generate webpack config like this:

{
  output: {
    path: ProjectPath,
    filename: '[name].js',
    chunkFilename: '[name].js',
  },
  entry: {
    'pages/index/index': 'pages/index/index.ts',
    'pages/users/users': 'pages/users/users.ts'
  }
}

and sass file you should use extract-text-webpack-plugin with webpack config like this:

{
  entry: {
    'components/chart/chart.css': 'components/chart/chart.scss'
  },
  plugins: [
    new ExtractTextPlugin("[name]")
  ]
}

[autra]

The problem with this approach is that webpack insert all its boilerplate on top of each processed file (of course, it supposes each one should be a bundle on its own), thus yielding very large files each time.

It would be very nice to have the possibility to have webpack process each files with the loaders, plugins etc... without actually treating them as proper entries. For example, this would allow to transpile sources and include them in npm packages very easily.

[rmanoka]

You can use file-loader to do this. In your module.rules, set it up to transpile your source and then use file-loader to output the source code as a file. If you are processing content, then use extract-loader also, because content gets transformed into code by most? webpack loaders.

eg. use: ["file-loader?name=[path][name].[ext]", "babel-loader"]

This will not scan your dependencies though. You could use multi-loader with one branch using file-loader and another processing as usual (to scan dependencies) but you probably don't want to processing node_modules.

[RyanEwen]

@rmanoka your suggestion worked for me except that webpack still creates bundles which are unneeded.

I have to prefix the output.filename with something to prevent the bundles from overwriting the files transpiled by babel-loader and then written by file-loader.

Also, this means that I can't use webpacks source maps.

:(

My use case is that I want to have 2 webpack configs. One for new react code/bundles, and one for old legacy code (hundreds of vanilla JS files that aren't modules or namespaced or anything). That old code is transpiled because there are some ES6 classes and newer browser APIs used.