4. webpack处理图片资源

常用的样式loader

• file-loader：可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片。

• url-loader：功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 base64 的 URI。

• html-loader：处理html中的img，结合url-loader可以将html中的img的路径正确打包

• 注意点：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，解析时会出现图片路径变为 [object Module]，解决方法，关闭url-loader的es6模块化，使用commonjs解析。

一般图片小于8k-12k都可以使用url-loader处理成base64的图片。url-loader基于file-loader。

当图片大于自己设定limit的值时会自动交给file-loader处理。

将图片使用base64处理的优点是减少请求数量(减轻服务器压力)，缺点是图片的体积会变大(文件请求速度变慢)

为什么html文件还需要html-loader处理：https://blog.csdn.net/logan_LG/article/details/82082442

1. 安装 url-loader，file-loader, html-loader

   npm i url-loader file-loader html-loader -D
   

2. 新建base.css文件，其中vue.jpg为5KB

   .angular{
   	width: 400px;
       height: 400px;
       background: url(./imgs/angular.jpg) no-repeat center;
   }
   .react{
   	width: 400px;
   	height: 400px;
       background: url(./imgs/react.png) no-repeat center;
   }
   .vue{
   	width: 400px;
       height: 400px;
       background: url(./imgs/vue.jpg) no-repeat center;
   }
   

3. 在入口文件(src/index.js)文件夹中引入base.css文件

   import './base.css'
   

4. 在src目录下创建index.html文件作为html-webpack-plugin的模板文件。

   <div class="angular"></div>
   <div class="react"></div>
   <div class="vue"></div>
   <img src="./imgs/angular.jpg" alt="">
   <!-- 被处理成base64 -->
   <img src="./imgs/vue.jpg" alt="">
   

5. 在webpack配置文件webpack.config.js中设置

   const path = require('path');
   
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       mode: 'development',
       entry: './src/index.js',
       output: {
           filename: 'built.js',
           path: path.resolve(__dirname, 'build')
       },
       module: {
           rules: [{ //处理css文件
                   test: /\.css$/,
                   //多个loader使用use加载,单个使用loader
                   use: ['style-loader', 'css-loader']
               },
               { //处理css/less等文件中的图片
                   test: /\.(png|jpg|gif)$/,
                   loader: 'url-loader',
                   options: {
                       //当图片小于8KB时，用url-loader处理,否则用file-loader处理
                       //配置过url-loader后就不用配置file-loader
                       limit: 8 * 1024,
                       name: '[name][hash:8].[ext]' //保留原来图片的名字，并加上8位的hash值
                       //如果html中的图片路径变为[object Module],则开启下边配置
                       //esModule: false
                   }
               },
               {
                   test: /\.html$/,
                   //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                   loader: 'html-loader'
               }
           ]
       },
       plugins: [
           new HtmlWebpackPlugin({
               template: './src/index.html'
           })
       ]
   }