webpack图片配置

在webpack.config.js中配置
import Icon from ‘./icon.png’; // 引入图片
npm install file-loader --save-dev
引入图片

npm install url-loader --save-dev
将图片编译成Base64的格式
下载到页面 可限制大小 一旦超过最大kb值 会转成src格式
自动使用file-loader 下载到页面

const path = require('path');

module.exports = {
  mode: 'production',    				//开发模式
  entry: './src/index.js',   				// 入口文件
  output: {										// 输出文件地址/名
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules:[ {
      test: /\.(png|jpg|gif)$/, 					 // 处理图片后缀名
      use: {
      	loader:"url-loader"						// 处理图片模块
        options: {   									//文件配置选择
          name:''[name].[ext] ", 				//  输出文件名 
          outputPath:'',							 // 文件输出的目录地址
          limit:"1024"   							//文件最大值 自定义
        }
      }
          
    }
  ]}
};

name:[name].[ext] 文件名就是原本名称 [name]图片名称 [ext] 图片后缀名
可以添加[hash]值 使其变的更加具有独立性 [name]_[hash].[ext]

在hash中 设置[hash:8] 字符只有8个