webpack
0 views0
CommentsWhat is Webpack?
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Webpack is a tool in the Build Automation category of a tech stack.
Key Features
Bundles ES Modules, CommonJS, and AMD modules (even combined)Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time)Dependencies are resolved during compilation, reducing the runtime sizeLoaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etcHighly modular plugin system to do whatever else your application requires
Webpack Pros & Cons
Pros of Webpack
- ✓Most powerful bundler
- ✓Built-in dev server with livereload
- ✓Can handle all types of assets
- ✓Easy configuration
- ✓Laravel-mix
- ✓Overengineered, Underdeveloped
- ✓Makes it easy to bundle static assets
- ✓Webpack-Encore
- ✓Better support in Browser Dev-Tools
- ✓Redundant
Cons of Webpack
- ✗Hard to configure
- ✗No clear direction
- ✗Fire and Forget mentality of Core-Developers
- ✗Loader architecture is quite a mess (unreliable/buggy)
- ✗Spaghetti-Code out of the box
- ✗SystemJS integration is quite lackluster
Webpack Alternatives & Comparisons
What are some alternatives to Webpack?
gulp
Build system automating tasks: minification and copying of all JavaScript files, static images. More capable of watching files to automatically rerun the task when a file changes.
Grunt
The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
rollup
It is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.
