1、准备

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>webpack</title>
  7.   </head>
  8.   <body>
  9.     <div id="box1"></div>
  10.     <div id="box2"></div>
  11.     <div id="box3"></div>
  12.     <img src="./angular.jpg" alt="angular">
  13.   </body>
  14. </html>
  1. #box1{
  2.   width: 100px;
  3.   height: 100px;
  4.   background-image: url('./vue.jpg');
  5.   background-repeat: no-repeat;
  6.   background-size: 100% 100%;
  7. }
  9. #box2{
  10.   width: 200px;
  11.   height: 200px;
  12.   background-image: url('./react.png');
  13.   background-repeat: no-repeat;
  14.   background-size: 100% 100%;
  15. }
  17. #box3{
  18.   width: 300px;
  19.   height: 300px;
  20.   background-image: url('./angular.jpg');
  21.   background-repeat: no-repeat;
  22.   background-size: 100% 100%;
  23. }
  1. import './index.less';

2、webpack.config.js

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     filename: 'built.js',
  8.     path: resolve(__dirname, 'build')
  9.   },
  10.   module: {
  11.     rules: [
  12.       {
  13.         test: /\.less$/,
  14.         use: ['style-loader', 'css-loader', 'less-loader']
  15.       },
  16.       {
  17.         // 问题：默认处理不了html中img图片
  18.         // 处理图片资源
  19.         test: /\.(jpg|png|gif)$/,
  20.         //会将html引入的图片以 base64 编码并打包到文件中，最终只需要引入这个dataURL 就能访问图片了。
  21.         loader: 'url-loader',
  22.         options: {
  23.           // 图片大小小于8kb，就会被base64处理
  24.           // 优点: 减少请求数量（减轻服务器压力）
  25.           // 缺点：图片体积会更大（文件请求速度更慢）
  26.           limit: 8 * 1024,
  27.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
  28.           // 解析时会出问题：[object Module]
  29.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  30.           esModule: false,
  31.           // 给图片进行重命名
  32.           // [hash:10]取图片的hash的前10位
  33.           // [ext]取文件原来扩展名
  34.           name: '[hash:10].[ext]'
  35.         }
  36.       },
  37.       {
  38.         test: /\.html$/,
  39.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  40.         loader: 'html-loader',
  41.         options:{ 
  42.           esModule:false,
  43.         }
  44.       }
  45.     ]
  46.   },
  47.   plugins: [
  48.     new HtmlWebpackPlugin({
  49.       template: './src/index.html'
  50.     })
  51.   ],
  52.   mode: 'development'
  53. };

3、结果

image.png
图片vue小于8k，被base64处理