webpack

•- AlloyTeam- 2014- - Github: https://github.com/lcxfs1991

•- - - Hybrid, React Native

From webpack1 to webpack2

webpack.github.io

webpack.io

webpack.js.org

From webpack1 to webpack2

Gulp Grunt Browserify webpack

Github Stars

23668 11105 10350 19684

Weekly Download

65W+ 46W+ 50W+ 66W+

Gulp vs Grunt vs Browserify vs webpack

webpackwhy webpack

1. react

webpack

2. 160

gulp300

Loader

Plugin

webpack

webpackmodule & chunk & positioning

• Module 1. js2. css, images, fonts...

Webpack -- Module

• Chunk 1. Many small modules combined2. Entry Chunk, Output Chunk, Common Chunk

Webpack -- Chunk

• (module loader)1. requirejs2. seajs

1. 2.

Webpack --

• (module bundler)1. browserify2. webpack

1. 2. 3. 4. (bundle/chunk)

Webpack --

bundler

more than a module bundler

Stronger as the community florish

1. entry

2. output

3. loader

4. plugins loader

webpack api

5. resolve

Webpack

webpacka basic building tool

1.

Webpack

2. (js, css, image )

3.

GulpWebpack

js

WebpackGulp

Script

Webpack --

• webpack-stream

13

gulp.watch

Webpack --

• 1. es6 => es5 2. image => base643. sass/less => css4. etc …

Webpack –

Loader & Plugin

1. css less-loader, sass-loader

2. : url-loader, file-loader

3. js es6 es5

babel-loader babel-preset-es2015 babel-preset-react, babel, babel-

preset-loose

4. html html-loader

5. js expose-loader

6. import-loader

7. List of loaders

Loaders

1. html HtmlWebpackPlugin

2. css ExtractTextPlugin

3. UglifyJsPlugin

4. List of Plugins

Plugins

Webpack –

1. entry =>

- Single entry

Webpack –

1. entry =>

- Object Syntax

Webpack –

1. entry =>

- Object Syntax

2. output =>

Webpack –

: React

:

: 10

:

26s

Webpack

Big-scale app

1.

2.

3.

4.

5.

• External library

26s

18s

• DllPlugin

• DllReferencePlugin

• noParse es5

• PrefetchPlugin stats-webpack-plugin

• PrefetchPlugin http://webpack.github.io/analyse/

• PrefetchPlugin hints => long module build chains

26s

16.8s

• resolve.alias

• resolve.unsafeCache

• exclude

•1. resolve.root2. resolve.modulesDirectory3. resolve.fallback

18s

15s

• babel-loader

15s

8s

• Happypack• js

• happypack• css ( extract-text-webpack-plugin

• happypack• css ( extract-text-webpack-plugin

• happypack

8s

5s

26s 5s

66s 19.5swebpack.optimize.

UglifyJsPlugin webpack-uglify-parallel

Webpack livereload ?

live reload

/

1. server

2. React-hot-loader3. HotModuleReplacementPlugin

/

server

server

proxy-middleware

/

react-hot-loader

/

HotModuleReplacementPlugin

/

1 js bundle

devtool

devtool

inline-source-map

eval,

devtool

devtool

1. package.json script

2. webpack.xxx.js process.env.NODE_ENV

& => && =>

Mac & Linux => exportWindows => set

: 10

:

webpackwebpack scalability

1. cdn & hash2.3.

webpack

cdn hash

• cdncdn

• Webpack cdn

1. cdn of js / img => output.publicPath2. cdn of css => extract-text-webpack-plugin

cdn hash

• hash1.2. html3.

cdn hash

1. hash2. chunkhash3. contenthash (extract-text-webpack-plugin)

cdn hash

chunk md5Webpack-md5-hash

cdn hash

• require• require.ensure• router

• /

• CommonsChunkPlugin1. Entry chunk

• CommonsChunkPlugin

2. Explicit vendor chunk

• CommonsChunkPlugin

3. common chunk

4. 3

• CommonsChunkPlugin

1. chunk hashchunk-manifest-webapck-plugin

2. commonchunk chunk module id

recordsPath, recordsInputPath, recordsOutputPath

• CommonsChunkPlugin

webpack2webpack future

Tree-shaking

Tree-shaking

1. babel-preset-es2015-loose-native-modules2. babel-preset-es2015-native-modules

transform-es2015-modules-commonjs

Tree-shaking

Webpack2

Webpack2 with tree-shaking

Webpack1

Tree-shaking

Code Split

• system.import• promise• error

Code Split

webpack2 Demo

• https://github.com/SteamerTeam/steamer-react/tree/dev

webpack2

• https://github.com/lcxfs1991/blog/issues/14

Please give a shot