Webpack Road (2)--path and packing of pictures

Just beginning with Webpack's classmate is easy to fall into the picture packing this pit, such as packing out the picture address is not correct or some pictures can not be packaged into our target folder (bundle). Let's analyze the application scenario of the picture in the Webpack project.

In the actual production of the following types of pictures are cited:

1. The SRC attribute reference or inline style reference of the IMG tag in the HTML file

<div style= "Background:url (photo.jpg)" ></div>

2. Settings such as background images in CSS files

. Photo {    Background:url (photo.jpg);}

3. Dynamically added or altered picture references in JavaScript files

var Imgtempl = '  ';d ocument.body.innerHTML = Imgtempl;

4. References to pictures in Reactjs

Import React from ' React ', import reactdom from ' React-dom '; class App extends React.component {    render () {        return ( );}    } Reactdom.render (<app/>, Document.queryselector (' #container '));

Url-loader

The introduction of images in Webpack requires a dependency on the Url-loader loader.

Installation:

NPM Install Url-loader--save-dev

Of course you can write it to the configuration and install it later with other tool modules.

In the Webpack.config.js file, configure the following:

Module: {loaders: [{test:/\. png|jpg) $/, loader: ' url-loader?limit=8192 '}]}    

The Test property represents a type of picture that can be matched, except PNG, JPG, and so on, separated by a vertical bar.

The limit field behind the loader represents the picture packing limit, which does not mean that it cannot be packaged, but that it automatically turns into a base64 code reference when the size of the picture is less than the limit. Images larger than 8192 bytes in the above example are packaged properly, and images smaller than 8192 bytes are referenced in base64 manner.

Url-loader In addition to the Limit field, you can specify the directory and file name of the picture package by using the Name field:

Module: {loaders: [{test:/\. png|jpg) $/, loader: ' Url-loader?limit=8192&name=images/[hash:8]. [Name]. [ext] '}]}

The Name field in the previous example specifies that a folder named images is generated under the packaging root directory (Output.path) with a 8-bit hash value preceded by the original picture name.

Example: The project catalog is as follows

Bg.jpg picture under sibling Images folder is referenced in Main.css

Background-image:url (./images/bg.jpg);

With the previous configuration, the code is packaged with the $ webpack command to generate the following directory

In the packaged directory, the CSS file and the images folder maintain the same level, so you can access the image without making any changes to the task. The difference is that after the packaging of the picture added a hash value, the Bundle.css file is also the introduction of a hash value of the picture.

Background-image:url (images/f593fbb9.bg.jpg);

(in the example above, a separate CSS technique was used, just for illustrative purposes)

Publicpath

Output.publicpath represents the publishing address of a resource, and when configured, all resources referenced by relative paths in the packaged file are replaced by the configured path.

Output: {path: ' dist ', Publicpath: '/assets/', filename: ' Bundle.js '}

Main.css

Background-image:url (./images/bg.jpg);

Bundle.css

Background-image:url (/assets/images/f593fbb9.bg.jpg);

The advantage of this property is that when you configure the address of the picture CDN, local development refers to the local image resources, and the resources are all directed to the CDN when you pack the line.

However, it is important to note that if you do not have a definite publish address, it is not recommended to configure the property, otherwise the resource path will be confusing after you have packaged it.

The picture in JS

At the beginning of the project development with Webpack students will find: in JS or react the pictures are not packaged into the bundle folder.

The correct way to do this is to refer to the picture path in a modular manner so that the referenced picture can be successfully packaged into the bundle folder.

Js

var Imgurl = require ('./images/bg.jpg '),    Imgtempl = '  ';d Ocument.body.innerHTML = Imgtempl;

React

Render () {    return ();

A picture in HTML

Because Webpack does not handle HTML very well, it is relatively troublesome to package the image resources in HTML files. Here you need to refer to a plugin--html-withimg-loder

$ NPM Install Html-withimg-loader--save-dev

Webpack.config.js Adding a configuration

Module: {loaders: [{test:/\.html$/, Loader: ' Html-withimg-loader '}]}

Referencing HTML files in Bundle.js

Import '.. /index.html ';

In this way, the images in the HTML file can be packaged into the bundle folder.

Webpack Road (2)--path and packing of pictures