Day 19 - Intermediate JS: Webpack - Loaders & Plugins
WebDev Series
19 March, 2024
21
21
0
Contributors
- Day 19 - Intermediate JS: Webpack - Loaders & Plugins
html-webpack-plugin- This will automatically build an HTML file in
distfor us when we build our project.
- This will automatically build an HTML file in
- Use loaders by defining
module.rulesinwebpack.config.jsconfig file and use imports likeimport './style.css';andimport Img from './unsplash.jpg';in the js file 🙂 - The image tag is dynamically added to the
dist/index.htmlfile//...
module: {
rules: [
{
test: /\\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
]
}
//... - A little into regex (regular expression) used here
- JSON is a built-in loader meaning
import data from ./data.jsoncan be used without added any loader towebpack.config.js npx webpack --watchto let it run & update everytime we make any change
- The image tag is dynamically added to the