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 "./icon.jpg"

  function component() {
    var element = document.createElement('div');

    element.innerHTML ="hello webpack";
    element.classList.add('hello');

    var myIcon = new Image();
  	myIcon.src = Icon;
    console.log(myIcon);

    element.appendChild(myIcon);

    return element;
  }
  document.body.appendChild(component());

当你  import

import Icon from "./icon.jpg"，  该图像将被处理并添加到 dist 目录，并且变量将包含该图像在处理后的最终 url

5.style.css文件：

.hello {
  color: red;
  background: url('./icon.jpg');
}

5。打包：

webpack --mode development

此时，会看到dist下的图片名称被更改。打开index.htm。会看到页面的显示。body中有img标签（注意看图片的src属性，与第2步配置的路径相同）。head中还有style标签。

6.图片的引用路径

  若没有name属性，则图片的引用路径为publicPath+filename。也就是js、css中被打包后的图片的路径。

  若有name属性，则图片的引用路径为publicPath+name。也就是js、css中被打包后的图片的路径。

  ！！！一定要设置publicPath。