3.1打包背景图片

const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
      filename:'bundle.js',
      path:resolve(__dirname,'dist')
    },
    mode:'development',
    module:{
        //对某种格式的文件进行转换的处理
        rules:[
            {
                //匹配规则，得用正则表达式，这里是匹配后缀名
                test:/\.less$/,
                use:[
                    //先将css文本的格式用style标签插进html中，在进行css渲染
                    //将js的样式插入style标签中
                    //数组中解析的顺序是从下到上的顺序，逆序执行
                    "style-loader",
                    //将css转化为js
                    "css-loader",
                    "less-loader"
                ]
            },
          //这里需要配置图片
            {
                test:/\.(jpg|png|gif)$/,
                loader:"url-loader",
                options:{
                    limit:10*1024,
                }
            }
        ]
           },
           plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            })
           ]
}

下载

在使用背景图片时应该下载两个loader
npm i file-loader url-loader -D

结构

在入口文件需要引入css或者less文件
//index.js
import './index.less'

3.2打包img标签直接引入图片

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: resolve(__dirname, "dist"),
  },
  mode: "development",
  module: {
    //对某种格式的文件进行转换的处理
    rules: [
      {
        //匹配规则，得用正则表达式，这里是匹配后缀名
        test: /\.less$/,
        use: [
          //先将css文本的格式用style标签插进html中，在进行css渲染
          //将js的样式插入style标签中
          //数组中解析的顺序是从下到上的顺序，逆序执行
          "style-loader",
          //将css转化为js
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          limit: 8 * 1024,
          // 因为url-loader解析时，默认选择的是es6模块化解析，而html引用图片使用的是common.js
          // 解析会出现问题：[object Module],
          //所以需要关闭es6解析模块，使用common.js
          esModule: false,
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
          options: {
            esModule: false,
          }
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

这里需要下载html-loader 将url-loader解析成es6模式

注意这里打包图片

  options: {
            esModule: false,
          }
 在html-loader和url-loader都得写