webpack 之打包图片

 我们可以使用webpack打包图片。打包的具体步骤如下：

1.打包图片时我们需要file-loader。安装flie-loader。

npm install --save-dev file-loader

2.配置webpack.fig.js

  module:{
  rules:[
    {
      test:/\.(png|svg|jpg|gif)$/,
      use:["file-loader?limit=8192&name=dist/[hash].[ext]"]
    }
    ]
  }
};

注意：limiet的意思是：图片大小小于limit时，使用base64转码。大于limit时，正常打包。

        name：通过name属性改变图片的打包目录和文件名。

        hash：图片经过处理后，会在输出文件夹中生成图片，此时图片的名字为hash。ext代表图片的格式。

3.项目的结构如下

webpack_demo
  --node_modules               
  --src
    --index.js
    --icon.jpg
    --style.css
  --webpack.config.js 
  --package.json
  --index.js

4.index.js如下：

 import './style.css';
 import Icon from ".