1

I've started with TypeScript 2.5 years ago with Visual Studio and ASP.Net MVC. VS Web Essentials would compile ts files on save and the WebOptimizer library would bundle them together at runtime in a specific order. Basically a disaster, once the project was sufficiently large.

Than I had a look at some generated code by the gulp-angular generator. I took the best parts of it, added gulp to my build process and suddenly TypeScripts compiler took care of ordering my compiled JavaScript. The latest version of that generator is using webpack to compile and bundle TypeScript. This allows one to use ES6 styled imports, ... and that's great, but they didn't change anything else.

They are still using bower for client dependencies, even though you could use npm, and the style sheet compilation is also happening in gulp, even though webpack should be able to take care of that. Now, I love bower and the fact that I can configure all the steps, which should happen with the files. It seems very transparent to me, compared to webpack's black magic. I can split different files into vendor libraries and application and always know, what I get.

On the other hand, webpack alone might be great and easier to use for smaller projects. There is a (from my perspective) frightening example of code you can compile in webpack:

style.css:

body {
    background: yellow;
}

entry.js:

require("!style!css!./style.css");
document.write(require("./content.js"));

The generated JavaScript file contains the CSS and adds it to the pages header. It shows webpacks capabilities, but who would want to do something like that?

So the questions:

  • Is this generally a good approach? Why not using npm for client libraries as well?
  • In which scenario is it a good approach to bundle CSS content into JavaScript files? (I really can't think of any)
  • Why use webpack in the first place? Are there further advantages than having ES6 modules, instead of ///<reference path="..." />
1

Webpack uses loaders to simplify conversion of file formats:

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Gulp is stronger at several things that complement Webpack. For example:

  1. Static File Handling

Gulp can handle static assets better than Webpack. The copy-webpack- plugin can also copy files from your source to your build folder but when it comes to watching file deletion or changes like overriding an image, gulp.watch is a safer bet.

  1. Server Environment

Webpack also comes with a local server environment via Webpack Dev Server but using BrowserSync has some features you might not want to miss:

CSS/HTML/image injection for non-app projects

Multiple device testing out of the box

Includes an admin panel for more control

Bandwidth throttling for speed and loading tests
  1. Compilation Time

As seen in this post on GitHub, SASS gets processed by node-sass much quicker than by Webpack's combination of sass-loader, css-loader and extract-text-webpack-plugin.

  1. Convenience

In Webpack, you have to import your CSS and SVG files for instance into JavaScript to process them which can be quite tricky and confusing sometimes. With Gulp, you don't need to adjust your workflow.

References

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.