Skip to content

Instantly share code, notes, and snippets.

@mstoltenburg

mstoltenburg/require 2 webpack.md

Last active May 19, 2017 08:52
Show Gist options
  • Save mstoltenburg/f3eff00ce92522bc7518b633de8c0b00 to your computer and use it in GitHub Desktop.
Save mstoltenburg/f3eff00ce92522bc7518b633de8c0b00 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
require 2 webpack.md

webpack

  • Online-Tutorials und Doku sind schnell veraltet, nicht so leicht zu finden, auch wegen des Versions-Sprungs 1 => 2. Erinnert an WP.
  • Der generierte Code ist relativ logisch, allerdings ist es eher ein build Tool als ein Tool zum asynchronous module loading.
  • Transpiler wie Babel für ES6 lassen sich extrem leicht integrieren.

Pro

  • Schnell. Der watch modus ist extrem schnell.
  • Gut erweiterbar. jshint und eslint können als Plugins integriert werden.
  • Keine Konfiguration zum Einbinden von node Modulen nötig. Und inzwischen gibt es so gut wie alles als npm package.
  • Versteht ES6, AMD und CommonJS Module
  • Tree-shaking für ES6 Module

Kontra

  • Man hat keine benamten Module mehr. Nicht wirklich kompatibel mit unserer window.Zeit.require Methode.

Konfiguration

webpack --display-reasons --display-modules

--display-reasons Zeigt jedes Modul, das dem bundle hinzugefügt wurde, die Größe des Moduls und Dateiname und Format der einbindenden Datei. --display-modules sorgt dafür, dass alle Module angezeigt werden. Standard,äßig werden NPM Module ausgeblendet.

Erkenntnisse

  • Standardmäßig lässt uglify Licence-Kommentare drin. Man kann das per config ausschalten, dann braucht es 39 Sekunden für 253 kB, wenn man sie drinlässt sind es 20 Sekunden für 254 kB.

You are free to use a jQuery project in commercial projects as long as the copyright header is left intact.

Links

Webpack 2 https://webpack.js.org
From Require.js to Webpack https://gist.github.com/xjamundx/b1c800e9282e16a6a18e
Pete Hunt’s webpack-howto https://github.com/petehunt/webpack-howto
Getting Started with webpack 2 https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment