Webpack3 Configuring font icons and packaging related issues

Webpak There are two ways to configure font icons

First, the font icon and CSS are packaged in the same file.

1. First you need to install Url-loader

2. The relevant configuration is as follows (development environment using this method is possible)

{   test:/\. ( PNG|WOFF|WOFF2|SVG|TTF|EOT) $/,   use:{        loader:' Url-loader ',        options: {            limit: 100000,  //This is big enough so all the font icons will be packaged in CSS         }}

The limit above must be guaranteed to be greater than the size of the maximum font file , because this parameter tells Url-loader that if the file is less than this parameter, it is built directly into the file as a data URL. This is the most convenient way to do this, without the problem of packaging the path, but the disadvantage is that the file is very large, if the line does not use this way to package.

The font icon is packaged in a single folder.

1. First you need to install File-loader

NPM Install--save-dev File-loader

2. The relevant configuration is as follows (used when packing in this way)

{   /\.( WOFF|WOFF2|SVG|TTF|EOT) $/,   use:[        {loader:' File-loader ', Options:{name: ' fonts/[name].[ Hash:8]. [Ext] '}}//project settings packaged under the Fonts folder under Dist      ]}

The problem with packaging is that the path is wrong I developed when I put font.css and font icon to open, Webpack packaging will all the CSS package to a CSS folder, font icon in a folder,

The first one is the location before packing, the second is the storage after packing, which is supposed to be packaged and no change in position before packing. But can't find the font icon, when I open the packaged CSS file found,

Webpack all referenced paths in the wrapped CSS file './' or '. /' will be cleared away this is crucial.

Problems can be fixed to a separate packaged CSS there must be a problem, in a separate package of CSS where you can add a path will automatically add the path to the introduced files such as: Publicpath: '. /', which is added before the reference path: /

When set, the package path is introduced as normal. The picture path is also caused by this problem. It also solves the problem of the picture path.

Webpack3 Configuring font icons and packaging related issues