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