+ o n ks.url.cn/pc/misc/files/20161028/4051c2f3ece7456198d49b9feed56d34.pdfgulp grunt browserify...
TRANSCRIPT
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
Please give a shot