webpack对静态资源的处理

一、对图片的处理

        1.首先安装url-loader ，因为依赖 file-loader 所以要一并安装，为其指定版本。

            yarn add url-loader@0.6.2 file-loader@1.1.6 --dev

        2.在webpack配置文件的module中写入以下内容。

// 图片的配置
{
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 8192    //文件大于8kb才单独打包成文件
                }
            }
        ] 
}

        3.在css中引入图片测试，会在dist文件中添加一个之前引入的图片。

二、对图标字体的处理

        1.这里使用font-awesome，首先安装 font-awesome，因为是线上用所以不加--dev

            yarn add font-awesome

        2.在webpack配置文件的module中写入以下内容。

// 字体图标的配置
{
	test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
	use: [
		{
			loader: 'url-loader',
			options: {
				limit: 8192 
			}
		}
	]
}

        3.在js入口文件引入font-awesome，这里使用react举例。

import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
ReactDOM.render(
	<div>
		<i className="fa fa-address-book"></i>
		<h1>Hello,World</h1>,
	</div>,
	document.getElementById('app') 
);

        4.成功后会在dist文件下出现压缩后的文件。