Download as PDF, PPTX
![1. Specify an entry point
// In webpack.config.js
module.exports = {
entry: [
'./app/index.js'
]
}](https://image.slidesharecdn.com/webpack101slides-170110082408/85/webpack-101-slides-7-320.jpg)
![2. Add a loader
// In webpack.config.js
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: [
{test: /.js$/, exclude: /node_modules/ , loader: "babel-loader" }
]
}
}](https://image.slidesharecdn.com/webpack101slides-170110082408/85/webpack-101-slides-8-320.jpg)
![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"
}
}](https://image.slidesharecdn.com/webpack101slides-170110082408/85/webpack-101-slides-9-320.jpg)
![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]
}](https://image.slidesharecdn.com/webpack101slides-170110082408/85/webpack-101-slides-12-320.jpg)
More Related Content
webpack 101 slides
- 1.
- 2. What is it'spurpose? To bundle your code
- 3. How does itwork?
- 4. What are some commoncode transformations?
- 5. btw...webpack is hard Ithas terrible documentation
- 6. 3 main thingswebpack 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. 1. Specify anentry point // In webpack.config.js module.exports = { entry: [ './app/index.js' ] }
- 8. 2. Add aloader // In webpack.config.js module.exports = { entry: [ './app/index.js' ], module: { loaders: [ {test: /.js$/, exclude: /node_modules/ , loader: "babel-loader" } ] } }
- 9. 3. Specify theoutput // 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. Run webpack // npminstall 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. How do wereference 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. 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. html template <!DOCTYPE html> <htmllang= "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
- 15. Further Exploration loaders: postcss,json, file, url, svg-inline plugins: CaseSensitivePathsPlugin, InterpolateHtmlPlugin, WatchMissingNodeModulesPlugin, DefinePlugin, OccurrenceOrderPlugin, DedupePlugin webpack v2!!
- 16.
- 17.