webpackpackyourweb - apistek comparison browserify vs webpack...
TRANSCRIPT
Webpack pack your web
Ly Cheng
Modern Web 2015
LY
yhsiang
lyforever
國會無雙
市⻑⾧長給問
先調查⼀一下
Webpackmodule bundler
https://twitter.com/mjackson/status/584227818910777345
先講⼀一段故事
<script src=‘jquery.js’></script><script src=‘app.js’></script>
Uncaught Referencer Error jQuery is not defined
https://markb4.files.wordpress.com/2013/05/and-then-what-happened.jpeg
CommonJS vs AMD
Server-side reuse vs Parallel loading
CommonJS AMD
Works in the browser
without build
http://pichost.me/1835208/
But
Finally, you have to build sth.
ES6 Harmony
not ready for native browser
Not Only Javascript
css, images, fonts, html ….
Assets pipeline
In Rails, but now …
http://fccowasso.com/wp-content/uploads/2013/09/hope.jpg
http://webpack.github.io/
Webpack hasCode Splitting
LoadersPlugins
Hot Module Replacement
http://webpack.github.io/docs/comparison.html
ComparisonBrowserify vs Webpack
blog.namangoel.com/browserify-vs-webpack-js-drama
Basic Usage
ConfigurationCLI and webpack.config.js
plugins devtooltarget
loaderspreprocess fileshttp://webpack.github.io/docs/loaders.html
loaderspreprocess files
http://webpack.github.io/docs/loaders.html
pre-* / loaders / post-*
File loaderfilename template
http://webpack.github.io/docs/loader-conventions.html
url-loader, json-loader …
pluginsmake webpack flexible
Extract-textextract inline css to files
Code splittingload on demand
idea from GWT
CommonJS: require.ensure
AMD: require
{c, d} will be an additional chunk.
Stylesheets
require csscreate style element
inline cssextract-text-plugin
css files
Shimming modules
require("imports?$=jquery!./file.js")
var XModule = require("exports?XModule!./file.js")
Hot Module ReplacementLivereload for every module
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
Entrywebpack-dev-server/client?
http://localhost:2992webpack/hot/only-dev-server
Plugins new
webpack.HotModuleReplacementPlugin()
Webpack analyze
http://webpack.github.io/analyse/
Webpack 2webpack/concord
How We Use Webpack
Build with Reactwatchout-tw/prototype-seed
Directory Structurecomponent-based, SUITCSS
How about API
Proxy serverwebpack-dev-server and express
use proxy option now!
Special thank to @tomchentw
Thank you
Recommendations
https://github.com/petehunt/webpack-howtowebpack-howto
https://github.com/webpack/react-starterreact-starter