Webpack rules!

Transcript

2. Front end Developer at Direct Talk Henrique Sosa @henriquesosa
3. Webpack Onde vive? O que come? Como se reproduz?
4. Module Bundler
5. <script src="scriptlindo.js"></script>
6. <script src="scriptlindo.js"></script> var ohYeah = require('ohyeah');
7. <script src="scriptlindo.js"></script> var ohYeah = require('ohyeah'); require(["moduloAMD"], function(module) { /* … */ };
8. <script src="scriptlindo.js"></script> var ohYeah = require('ohyeah'); require(["moduloAMD"], function(module) { /* … */ }; import Awesomeness from 'Awesomeness';
10. <script src="bundle.js"></script>
11. Como ele faz isso?
13. pre-loaders pos-loaders loaders plugins
14. module.exports = { context: path.join(__dirname, "./src"), entry: {}, output: {}, module: { preLoaders: [], loaders: [], posLoaders: [] }, plugins: [], / * something else… */ }
15. entry: { html: "./index.html", jsx: "./index.jsx", vendor: ["react"] }, output: { path: path.join(__dirname, "./dist"), filename: "bundle.js" }
16. preLoaders: [ { test: /\.js$/, include: path.join(__dirname, "src"), exclude: /node_modules/, loader: "eslint-loader" } ]
17. loaders: [ { test: /\.html$/, loader: "file?name=[name].[ext]" }, { test: /\.scss$/, loaders: ["style", "css", "sass"] } ]
18. Plugins - CommonsChunkPlugin - HotModuleReplamentPlugin - DefinePlugin - openBrowserPlugin - devServer - IgnorePlugin - BannerPlugin - UglifyPlugin - OfflinePlugin - CleanPlugin - Extract CSS
19. PROD vs. DEV
20. webpack.config.prod.js webpack.config.js
21. scripts: { "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000", "dist": "webpack --verbose --colors --display-error-details --config webpack.config.prod.js" }
22. WEBPACK 2
23. DICAS
24. Performance
25. Performance EXTENSION-loader
26. Performance EXTENSION-loader Comunidade
27. Obrigado!