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
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
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
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