4.webpack打包图片

常用的样式loader

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

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

• 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/</span><span class="token punctuation">,</span>
                   <span class="token comment">//多个loader使用use加载,单个使用loader</span>
                   use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span>
               <span class="token punctuation">}</span><span class="token punctuation">,</span>
               <span class="token punctuation">{<!-- --></span> <span class="token comment">//处理css/less等文件中的图片</span>
                   test<span class="token punctuation">:</span> <span class="token regex">/\.(png|jpg|gif)/,
   loader: 'url-loader',
   options: {
   //当图片小于8KB时，用url-loader处理,否则用file-loader处理
   //配置过url-loader后就不用配置file-loader
   limit: 8 * 1024,
   name: '[hash:8].[ext]'
   //如果html中的图片路径变为[object Module],则开启下边配置
   //esModule: false
   }
   },
   {
   test: /.html$/,
   //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
   loader: 'html-loader'
   }
   ]
   },
   plugins: [
   new HtmlWebpackPlugin({
   template: './src/index.html'
   })
   ]
   }