WEBPACK
Download as PPTX, PDF0 likes61 views
Webpack is a module bundler that builds dependency graphs from entry points and combines modules into bundles. It allows developers to use a multi-file approach during development but bundle assets into fewer files for production. Loaders are used to bundle different file types like CSS. Plugins further customize the bundling process. Code splitting bundles common modules separately for better caching. Extracting CSS removes CSS invalidation on HTML changes. Tree shaking removes unused code automatically in production builds.
![LOADER BASIC STRUCTURE
module: {
rules: [
{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}
]
}
]
}](https://image.slidesharecdn.com/webpack-220624112810-c5542c55/85/WEBPACK-9-320.jpg)
![ADDITIONAL CUSTOMIZATIONS
Way to further customize the output of loaders we use plugin in webpack
PLUGIN STRUCTURE:
plugins: [
new html_webpack_plugin({
template: path.resolve(__dirname, "src/index.html"),
chunks: ["index"],
inject: true,
filename: "index.html"
}),
new html_webpack_plugin({
template: path.resolve(__dirname, "src/products.html"),
chunks: ["product"],
inject: true,
filename: "products.html"
})
]](https://image.slidesharecdn.com/webpack-220624112810-c5542c55/85/WEBPACK-10-320.jpg)
WEBPACK
- 1. WEBPACK WELCOME TO A SMALL SESSION ON WEBPACK
- 2. What is webpack? webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles
- 3. ARE WE USING WEBPACK? IN XSEED
- 4. Why Webpack? Network load Difficult to debug Difficult to read Somewebsite.com (muliple file approach) Somewebsite.com (lesser files approach) admin. js cart.js pay.js order.j s home. css bootstr ap.css admin .css main.js external.js main. css
- 5. How drawbacks can be removed ● The development environment can follow multi file approach ● While deployment we move it to lesser files approach THIS IS BASICALLY HOW WEBPACK WORKS
- 7. BASIC WEBPACK CONFIG const path = require("path") module.exports = { entry: "./index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") } }
- 8. WEBPACK LOADERS WEBPACK cannot bundle all files natively. It needs to have loaders for different file extensions. EX: Incase we try to load css in our project we need css loader for it to get loaded NOTE: The order in which we call a loader in use array should be proper
- 9. LOADER BASIC STRUCTURE module: { rules: [ { test: /.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } } ] } ] }
- 10. ADDITIONAL CUSTOMIZATIONS Way to further customize the output of loaders we use plugin in webpack PLUGIN STRUCTURE: plugins: [ new html_webpack_plugin({ template: path.resolve(__dirname, "src/index.html"), chunks: ["index"], inject: true, filename: "index.html" }), new html_webpack_plugin({ template: path.resolve(__dirname, "src/products.html"), chunks: ["product"], inject: true, filename: "products.html" }) ]
- 11. CODE SPLITTING ● Common modules can be bundled separately ● Browser cache will be used effectively HOW TO DO CODE SPLITTING: optimization: { splitChunks: { chunks: 'all' } }
- 12. Extract CSS from HTML using mini-css-extract-plugin Currently style-loader injects css to html site itself because of this a single text change in HTML will also invalidate browser cache for css DEAD CSS CAN BE REMOVED BY: PurgeCss
- 13. Tree Shaking PROCESS OF REMOVING UNUSED JS CODE Q: HOW TO DO IT? A: NOTHING JUST BUILD THE APP IN PRODUCTION MODE AND TREESHAKING IS PERFORMED AUTOMATICALLY
- 14. THANK YOU ALL