webpack解析图片，file-loader；和通过url-loader解析的区别

注意：安装之前，先保证webpack项目能正常运行！

1.安装 file-loader 依赖

cnpm i file-loader -D

2.在src目录下创建img文件夹，并引入一张图片（这里引入的是图片文件名叫 logo.jpg）

3.配置，在 webpack.config.js 下新增配置：

module.exports = {
  // ...
  module:{
    rules:[
      // ...
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:'file-loader'
      }
    ]
  }
}

4.使用，在search.js 引入图片

import ReactDom from 'react-dom';
import './search.css';
import './search.less';
import logo from './img/logo.jpg'; // 引入

class Search extends React.Component {
  render() {
    return <div className="search-txt">
      Search Text
      <img src={ logo } /> // 使用
    </div>;
  }
};

ReactDom.render(
  <Search/>,
  document.getElementById('root')
);

5.file-loader和url-loader解析图片的区别

其实二者功能相似，url-loader实际是在file-loader的基础上进行封装，并且对于设定 limit 大小的图片和字体文件，自动进行base64的转换；

5.1 安装 url-loader

cnpm i url-loader -D

5.2 在 webpack.config.js 下，修改 file-loader 配置为 url-loader

module.exports = {
  // ...
  module:{
    rules:[
      // ...
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:[
        	{
				loader: 'url-loader',
	        	options:{
	        		limit: 10240 // limit 的单位为 字节，这里只有当小于10k才允许自动转 base64
	        	}
			}
        ]
      }
    ]
  }
}