Vue初学28-webpack图片文件

使用webpack打包的时候，如果有文件用到了图片文件，同样需要安装相应的loader。

例如，页面背景引用一个图片

准备两张图片，一张大，一张小，因为图片的大小不同，webpack在打包的时候处理方式是不一样的。

图片没有超出限制大小

在src目录下，新建img目录，放入两个文件img_small.jpg，img_big.jpg

在css文件夹下新建一个main.css，以url的方式设置页面背景

body{
    background: url("../img/img_small.jpg");
}

 src目录下在main.js中添加对main.css的引用

require('./css/main.css')

安装url-loader，否则无法找到相应的图片，会报错。

url-loader 在文件大小（单位 byte）低于指定的限制时，可以返回一个 base64编码的DataURL。

运行命令

 npm install --save-dev url-loader 

安装完成后，在webpack.config.js，module,rules中添加如下配置，limit大小限制为14kb

            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 14336   //限制大小为14kb
                        }
                    }
                ]
            }

 通过命令打包生成bundle.js，在index.html中引用该文件。

平铺效果如下：

图片超出限制大小

在main.css中将img_small.jpg改为img_big.jpg，这样图片的大小就超出了limit的大小限制。

重新打包，运行，报错，找不到file-loader

因此，如果图片大小超出了limit限制，是采用file-loader加载的。

安装file-loader，运行命令

npm install --save-dev file-loader

安装完成，重新打包，找不到图片

 重新打包后，webpack将该图片重命名，打包到了dist目录下

 图片是有的，为什么会找不到呢？通过查看路径，发现url并没有将dist目录包括在路径里面，所以找不到。

怎么把dist目录添加上呢？需要在webpack.config.js的output中添加publicPath属性，为你的文件配置自定义 public 发布目录

output:{
      path:path.resolve(__dirname,'dist'),
      filename:'bundle.js',
      publicPath:'dist/'  
    }

重新打包，如下

 打包后，文件被拷贝到dist目录下，而且文件名也是hash重新编码的，如果文件比较多的话，会很乱。

最好能够分类存储，文件名最好也能增加下辨识度。

例如，所有的图片我想放在dist目录中img目录下，命名方式为原文件名+10位hash+扩展名

可以在webpack.config.js中url-loader的options中添加name配置：

options: {
            limit: 14336,   //限制大小为14kb
            name:'img/[name].[hash:10].[ext]'
         }

重新打包，dist目录下按照我们设置的规则，生成了目录和对应的文件。