Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

webpack 101 slides

362 views

Published on

beginners guide to webpack

Published in: Software
  • Be the first to comment

  • Be the first to like this

webpack 101 slides

  1. 1. webpack 101
  2. 2. What is it's purpose? To bundle your code
  3. 3. How does it work?
  4. 4. What are some common code transformations?
  5. 5. btw...webpack is hard It has terrible documentation
  6. 6. 3 main things webpack needs to know 1. the starting point of your application 2. which transformations to make on your code 3. where it should save the new transformed code
  7. 7. 1. Specify an entry point // In webpack.config.js module.exports = { entry: [ './app/index.js' ] }
  8. 8. 2. Add a loader // In webpack.config.js module.exports = { entry: [ './app/index.js' ], module: { loaders: [ {test: /.js$/, exclude: /node_modules/ , loader: "babel-loader" } ] } }
  9. 9. 3. Specify the output // In webpack.config.js module.exports = { entry: [ './app/index.js' ], module: { loaders: [ {test: /.js$/, exclude: /node_modules/ , loader: "babel-loader" } ] }, output: { path: __dirname + '/dist', filename: "index_bundle.js" } }
  10. 10. Run webpack // npm install webpack webpack-dev-server // In package.json { "name": "Foo Bar" , "version" : "1.0.0", "description" : "", "main": "index.js" , "scripts" : { "build": "webpack -p" , "start": "webpack-dev-server" }, "author": "", "license" : "ISC", "dependencies" : { "react": "^15.3.2" , "react-dom" : "^15.3.2" }, "devDependencies" : { "babel-core" : "^6.18.2" , "babel-loader" : "^6.2.7", "babel-preset-react" : "^6.16.0" , "html-webpack-plugin" : "^2.24.1" , "webpack" : "^1.13.3" , "webpack-dev-server" : "^1.16.2" } }
  11. 11. How do we reference the bundle from HTML? /app - components - containers - config - utils index.js index.html /dist index.html index_bundle.js package.json webpack.config.js .gitignore
  12. 12. html-webpack-plugin // npm install --save-dev html-webpack-plugin // In webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin' ) var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html' , filename: 'index.html' , inject: 'body' }); module.exports = { entry: [ './app/index.js' ], module: { loaders: [ {test: /.js$/, exclude: /node_modules/ , loader: "babel-loader" } ] }, output: { path: __dirname + '/dist', filename: "index_bundle.js" }, plugins: [HTMLWebpackPluginConfig] }
  13. 13. html template <!DOCTYPE html> <html lang= "en"> <head> <meta charset= "UTF-8"> <title>My App< /title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id= "app"></div> </body> </html> <!DOCTYPE html> <html lang= "en"> <head> <meta charset= "UTF-8"> <title>My App< /title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id= "app"></div> <script src="index_bundle.js"></ script> </body> </html> app/index.html dist/index.html
  14. 14. Further Exploration loaders: postcss, json, file, url, svg-inline plugins: CaseSensitivePathsPlugin, InterpolateHtmlPlugin, WatchMissingNodeModulesPlugin, DefinePlugin, OccurrenceOrderPlugin, DedupePlugin webpack v2!!
  15. 15. Credits nathf https://reacttraining.com/
  16. 16. Discussion

×