Webpack

Transcript

1. W E B PA C K PA C K Y O U R W E B
2. Before the topic, There were something you may know…
3. <script src=“app.js”></script> <script src=“jquery.min.js></script> Uncaught Referencer Error: jQuery is not defined.
5. <script src=“jquery.min.js></script> <script src=“app.js”></script>
6. <script src=“jquery.min.js></script> <script src=“angular.min.js”</script> <script src=“bootstrap.min.js”</script> <script src=“slick.min.js”</script> <script src=“angular-slick.js”</script> <script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“…”</script> <script src=“app.js”></script>
7. http://webpack.github.io/
8. http://webpack.github.io/ W E B PA C K H A S • Code Splitting • Loaders • Plugins • Hot Module Replacement
9. B A S I C U S A G E
11. Loaders Plugins
12. W E B PA C K D E V S E R V E R # node module for project $ npm install —-save webpack-dev-server # add to the entries of webpack config webpack-dev-server/client?http://0.0.0.0:8000 webpack/hot/only-dev-server
13. W E B PA C K D E V S E R V E R Just a little express server uses the webpack-dev-middleware.
14. C O D E S P L I T T I N G
15. // Co!"onJS require.ensure(dependencies, callback) // AMD require(dependencies, callback) https://webpack.github.io/docs/code-splitting.html
16. H O T M O D U L E R E P L A C E M E N T http://webpack.github.io/example-app/ http://webpack.github.io/docs/hot-module-replacement.html
18. H O W T O U S E # CLI tool $ npm install —-global webpack $ webpack # node module for project $ npm install —-save webpack
19. T H A N K . . .