GDayX - Advanced Angular.JS
Your SlideShare is downloading.
×
![/intro/how
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
filename: './dist/bundle.js'
},
module: {
loaders:...](https://image.slidesharecdn.com/webpack-171203210243/75/web-apps-building-with-webpack-7-2048.jpg?cb=1673610059)
![/features/pre-compile
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
filename: './dist/bundle.js'
},
module:...](https://image.slidesharecdn.com/webpack-171203210243/75/web-apps-building-with-webpack-12-2048.jpg?cb=1673610059)
![/features/pre-compile?page=2
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
filename: './dist/bundle.js'
},
...](https://image.slidesharecdn.com/webpack-171203210243/75/web-apps-building-with-webpack-13-2048.jpg?cb=1673610059)
![/features/minify-and-mangle
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
filename: './dist/bundle.js'
},
p...](https://image.slidesharecdn.com/webpack-171203210243/75/web-apps-building-with-webpack-14-2048.jpg?cb=1673610059)
Check these out next
More Related Content
Slideshows for you (20)
Similar to Web Apps building with Webpack (20)
Recently uploaded (20)
Web Apps building with Webpack
- 1. web apps building with webpack ignacio velazquez
- 2. /toc • intro • what it is • why using it • features • takeaway • where are we
- 3. intro
- 4. /intro/what static module bundler for modern javascript applications
- 5. /intro/what
- 6. /intro/what import $ from 'jquery'; import { Mailer, LIGHTNING_CROW_MODE } from './mailer'; import Alert from './alert'; import '../scss/alert.scss'; $('document').on('jon-is-in-danger', () => { Alert.renderWarning(` <div class="alert alert-danger"> <img class="icon" src=" './img/skull.png "/> Jon is scuba-diving in a frozen lake </div> `); Mailer.sendMessage({ subject: 'Daenerys', speed: LIGHTNING_CROW_MODE }); }); jquery Mailer Alert alert bundle skull bundle skull index
- 7. /intro/how module.exports = { entry: [ './src/js/index.js' ], output: { filename: './dist/bundle.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] } };
- 8. /intro/why The evolution of Homo Frontendalis. Source: blog.qmo.io
- 9. /intro/why <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack</title> <script src="src/js/jquery.min.js"></script> <script src="src/js/user-provider.js"></script> <script src="src/js/album-provider.js"></script> <script src="src/js/index.js"></script> <link rel="stylesheet" href="src/css/bootstrap.min.css"> <link rel="stylesheet" href="src/css/main.css"> <link rel="stylesheet" href="src/css/card.css"> </head> <body> <div class="container-fluid"> <div class="row main-action"> <div class="col-6 offset-3"> <button id="load-users" class="btn btn-primary btn-block"> Load Users </button> </div> </div> <div id="target-users" class="row"> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack</title> <script src="dist/bundle.js"></script> <link rel="stylesheet" href="dist/bundle.css"> </head> <body> <div class="container-fluid"> <div class="row main-action"> <div class="col-6 offset-3"> <button id="load-users" class="btn btn- primary btn-block"> Load Users </button> </div> </div> <div id="target-users" class="row"> </div> </div> </body> </html>
- 10. features
- 11. /features/loaders-and-plugins Mailer Alert alert bundle skull bundle skull loaders plugins uglifyJS extract CSS
- 12. /features/pre-compile module.exports = { entry: [ './src/js/index.js' ], output: { filename: './dist/bundle.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] } }; class Stark { constructor(name) { this.name = name; } }; const sansa = new Stark('Sansa'); const tony = new Stark('Tony'); 'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Stark = function Stark(name) { _classCallCheck(this, Stark); this.name = name; }; ; var sansa = new Stark('Sansa'); var tony = new Stark('Tony');
- 13. /features/pre-compile?page=2 module.exports = { entry: [ './src/js/index.js' ], output: { filename: './dist/bundle.js' }, module: { loaders: [ { test: /.scss$/, use: ExtractPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] } }; $primary: #ff0567; .text-color-primary { color: $primary; } a { color: $primary; } .text-color-primary { color: #ff0567; } a { color: #ff0567; }
- 14. /features/minify-and-mangle module.exports = { entry: [ './src/js/index.js' ], output: { filename: './dist/bundle.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ mangle: true, minify: true, comments: false }) ] }; /** * Have you seen the trailer? * * @returns {boolean} */ let infinityWarIsGonnaBeAmazing = () => { return true; }; function a(){return true}
- 15. /features/optimize-images loaders: [ { test: /.(gif|png|jpe?g|svg)$/i, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false, }, pngquant: { quality: '65-90', speed: 4 }, gifsicle: { interlaced: false, }, webp: { quality: 75 } } }, ], } ] SVG PNG JPEG GIFF TIFF …
- 16. /features/sync-browser
- 17. takeaway
- 18. /takeaway • Reduce number of files to load in the browser • Use latest Javascript version • Include in the build libraries from npm • Minify and obfuscate Javascript code • Use style pre-processors • Reduce images file size • Code linting • Develop faster via browser-webpack sync
- 19. questions
- 20. thanks https://slideshare.net/nass600 /web-apps-building-with- webpack https://twitter.com/nass600 https://linkedin.com/in/nass600 https://github.com/nass600
