笔记-webpack-图片文件处理

笔记-webpack-图片文件处理

1、安装url-loader
webpack中文网教程
在终端输入npm install --save-dev url-loader@1.1.2进行安装（这里也是有版本问题要注意一下）
2、在webpack.config.js中进行配置

test: /\.(png|jpg|gif)$/,
use: [{
       loader: 'url-loader',
       options: {
         // 当加载的图片小于limit时，会将图片编译成base64字符串形式
         // 当加载的图片大于limit时，需要使用file-loader模块进行加载
         limit: 8192
       }
}]

test里面的正则表达式表示接收的文件类型，这里包括了三种图片格式；
limit显示的是图片的大小限制，如果图片大于limit的值（8192B，该值可以手动更改），则需要安装另一个file-loader模块进行加载：
在终端输入：npm install --save-dev file-loader@3.0.1
3、为了打包之后的图片可以显示出来，需要给打包后的url加上路径：
图片的url没有前面的路径，所以会默认在与index.html同根的文件夹中找该图片，但是图片打包后是放在了dist文件夹中，所以浏览器找不到该图片就无法显示出来，所以就需要
在配置中加入：

publicPath:'dist/'

就会给url加上dist/路径。
以后开发中整体打包应该就不需要这个了
4、为了打包后的图片名字能够辨认，可以在打包之前规定一些命名规则：
打包之后的图片名称是一个32位的哈希值，目的是防止命名重复。但读取时很难辨认，因此先将所有的图片放到一个文件夹img/里，再跟上原来图片的名字[name]（这里name不加中括号会被当作该图片名就叫name，其他的就会重复，而且也并不好辨认。变量都放在[ ]中），再加上截取的8位哈希值防止重复.[hash:8]，再加上扩展名.[ext]
在option里面加上：

name:'img/[name].[hash:8].[ext]'

5、实操
首先给页面添加一个背景图片：

然后再终端打包：npm run build
然后就会发现在dist文件夹下面新建了一个img文件夹，刚刚的图片就被打包到了这个里面，并且是以我们想要的名称命名：

最后在浏览器中渲染出来（此处是个动图）：