From 0 to on-line development Enterprise E-Commerce Project _ front-end _11_webpack to Icon-font and image processing

In the previous article we have completed the Webpack for scripting, CSS, HTML processing.

By reading this article, you can solve the following issues:

• Webpack How to handle pictures
• Webpack How to handle font files

First, webpack processing picture url-loader1. Url-loader Installation

In fact, the processing of fonts and pictures, using a url-loader can be.

Install loader first

NPM Install Url-loader–save-dev

Show the installation is successful, there is no need to look for a package here, so ignore warn, that is to tell you that NPM 3 will not install the dependent package.

2.url-loader Configuration

Using Url-loader in the configuration file, add Url-loader after css-loader in module:

module: {    loaders: [        {            /\.css$/,            loader:ExtractTextPlugin.extract (" Style-loader ",            " Css-loader ")        },        {            /\. ( gif|png|jpg) \??. *$/,            loader: ' URL-loader '        }

Modify SRC-page->index->index.css casually introduce a picture.

body{    Background:url ('.. /.. /image/test-image.jpg ');}

After executing webpack we see the results of the execution

The picture is introduced, but the display is in base64 format, then we make it display the name of the picture, by configuring the parameters of the Url-loader can realize this function. Modify the configuration of the previous Url-loader

{    /\.( gif|png|jpg) \??. *$/,    -loader? limit = & name = resource/ [name]. [ext] '}

Parameter description:

limit: show the size of the file, less than this value will be packaged into the base64 you just saw the format, and larger than the value of the word will be packaged in the form of a file,

&name=resource: And put it in resouce

[name]. [Ext] : The name + extension of the file, so that the extension does not change when packaged.

Second, the webpack to the font processing

As mentioned earlier, Webpack on fonts and pictures are handled using the url-loader we just had,

In fact, the processing of fonts as long as a few font format can be. Plus Woff|svg|eot|ttf:

{    /\.( GIF|PNG|JPG|WOFF|SVG|EOT|TTF) \??. *$/,    -loader? limit = & name = resource/ [name]. [ext] '}

Iii. references

1.webpack processing of Icon-font and pictures

From 0 to on-line development Enterprise E-Commerce Project _ front-end _11_webpack to Icon-font and image processing