处理css中的图片引入

  1. const {
  2.     resolve
  3. } = require("path");
  4. const HtmlWebpackPlugin = require('html-webpack-plugin')
  6. module.exports = {
  7.     entry: './src/index.js',
  8.     output: {
  9.         filename: 'built.js',
  10.         path: resolve(__dirname, 'build')
  11.     },
  12.     module: {
  13.         rules: [{
  14.             test: /\.less$/,
  15.             use: [
  16.                 'style-loader',
  17.                 'css-loader',
  18.                 'less-loader'
  19.             ]
  20.         },{
  21.                 //处理css中的图片引入
  22.             test: /\.(png|svg|jpg|jpeg|gif)$/i,
  23.             type: 'asset/resource',
  24.         }]
  25.     },
  26.     plugins: [
  27.         new HtmlWebpackPlugin({
  28.             template: './src/index.html'
  29.         })
  30.     ],
  31.     mode: 'development'
  32. }

处理html中的图片引用

npm i html-loader -D

const {
    resolve
} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        },{
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        },{
                //处理html中的图片引入
            test: /\.html$/,
            loader: 'html-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}