opkaway.blogg.se - Webpack dev server pug template

assets/images is also where we programmed Webpack to look for images in configurations above. in an assets directory that contains corresponding sub directories for each type of resource (such as assets/images, assets/fonts, etc.). But it's common practice to house resources images, fonts, icons, etc. We can now begin adding images to our site! There's no strict, universal rule for where to place image files.

const path = require('path') Ĭonst HtmlWebpackPlugin = require('html-webpack-plugin') If you've been following along carefully with all lessons thus far, your entire updated configuration file looks like this: As stated in this loader's GitHub Documentation this dependency invokes Webpack to load the corresponding image resource for any tags it spots in our HTML.

html file types should have our new html-loader applied to them. The second test section begins a new rule for.

outputPath tells it where in dist it should place this image.

, we tell it to simply use the file's existing name and extension.

name tells Webpack what to name the image file it places in dist.

Because this dependency has more settings than other loaders, we add an options object with additional settings in key-value pairs: In use we specify file-loader as the Webpack loader responsible for handling these file types. We list /\.(gif|png|jpe?g)$/ to instruct Webpack to handle. The first test section states which file types this loader will be applied to. We'll create a two new entries in the rules array within the module object of (you can also reference what the entire updated file looks like further below): We can now configure Webpack to use them. Next we'll install the html-loader package: $ npm install -save-dev First well install the file-loader package: $ npm install -save-dev This means we must instruct Webpack to include any images in our dist bundle. So if our site includes images, these images must be present in dist too. It takes all source code and smushes it together into that dist directory that contains everything the browser needs to load our site.

You may wonder why we must use Webpack to display an image on our site. So let's make sure we understand how to work with images in a Webpack-driven environment. Most modern sites include at least a few images. However, there's still something we're missing: Images. Our Webpack-driven projects have really been coming together.