D:\change_job\front_end_development\ES6\ES6(43)-Bable\9.使用 url-loader 处理图片>npm run dev

> webpack-js-img@1.0.0 dev
> webpack-dev-server --open chrome

(node:11548) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\change_job\front_end_development\ES6\ES6(43)-Bable\9.使用 url-loader 处理图片
i ｢wdm｣: wait until bundle finished: /
× ｢wdm｣: Hash: b95befab207522ddd0a1
Version: webpack 4.44.1
Time: 989ms
Built at: 2022/05/28 20:46:54
             Asset       Size  Chunks             Chunk Names
      css/main.css   83 bytes    main  [emitted]  main
img/background.jpg    336 KiB          [emitted]
       img/dog.jpg    141 KiB          [emitted]
        index.html  446 bytes          [emitted]
           main.js    311 KiB    main  [emitted]  main
Entrypoint main = css/main.css main.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.22 KiB {main} [built] [failed] [1 error]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/img/logo.png] 5.77 KiB {main} [built]
[./src/index.css] 39 bytes {main} [built]
[./src/index.js] 173 bytes {main} [built]
    + 18 hidden modules

ERROR in ./node_modules/ansi-html/index.js 1:29
Module parse failed: Unexpected token (1:29)
File was processed with these loaders:
 * ./node_modules/html-withimg-loader/index.js
You may need an additional loader to handle the result of these loaders.
> module.exports = 'use strict'ansiHTML// Reference to https://github.com/sindresorhus/ansi-regexvar _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/var _defColors = {  reset: ['fff', '000'], // [FOREGROUD_COLOR, BACKGROUND_COLOR]  black: '000',  red: 'ff0000',  green: '209805',  yellow: 'e8bf03',  blue: '0000ff',  magenta: 'ff00ff',  cyan: '00ffee',  lightgrey: 'f0f0f0',  darkgrey: '888'}var _styles = {  30: 'black',  31: 'red',  32: 'green',  33: 'yellow',  34: 'blue',  35: 'magenta',  36: 'cyan',  37: 'lightgrey'}var _openTags = {  '1': 'font-weight:bold', // bold  '2': 'opacity:0.5', // dim  '3': '<i>', // italic  '4': '<u>', // underscore  '8': 'display:none', // hidden  '9': '<del>' // delete}var _closeTags = {  '23': '</i>', // reset italic  '24': '</u>', // reset underscore  '29': '</del>' // reset delete};[0, 21, 22, 27, 28, 39, 49].forEach(function (n) {  _closeTags[n] = '</span>'})/** * Converts text with ANSI color codes to HTML markup. * @param {String} text * @returns {*} */function ansiHTML (text) {  // Returns the text if the string has no ANSI escape code.  if (!_regANSI.test(text)) {    return text  }  // Cache opened sequence.  var ansiCodes = []  // Replace with markup.  var ret = text.replace(/\033\[(\d+)*m/g, function (match, seq) {    var ot = _openTags[seq]    if (ot) {      // If current sequence has been opened, close it.      if (!!~ansiCodes.indexOf(seq)) { // eslint-disable-line no-extra-boolean-cast        ansiCodes.pop()        return '</span>'      }      // Open tag.      ansiCodes.push(seq)      return ot[0] === '<' ? ot : '<span style="' + ot + ';">'    }    var ct = _closeTags[seq]    if (ct) {      // Pop sequence      ansiCodes.pop()      return ct    }    return ''  })  // Make sure tags are closed.  var l = ansiCodes.length  ;(l > 0) && (ret += Array(l + 1).join('</span>'))  return ret}/** * Customize colors. * @param {Object} colors reference to _defColors */ansiHTML.setColors = function (colors) {  if (typeof colors !== 'object') {    throw new Error('`colors` parameter must be an Object.')  }  var _finalColors = {}  for (var key in _defColors) {    var hex = colors.hasOwnProperty(key) ? colors[key] : null    if (!hex) {      _finalColors[key] = _defColors[key]      continue    }    if ('reset' === key) {      if (typeof hex === 'string') {        hex = [hex]      }      if (!Array.isArray(hex) || hex.length === 0 || hex.some(function (h) {        return typeof h !== 'string'      })) {        throw new Error('The value of `' + key + '` property must be an Array and each item could only be a hex string, e.g.: FF0000')      }      var defHexColor = _defColors[key]      if (!hex[0]) {        hex[0] = defHexColor[0]      }      if (hex.length === 1 || !hex[1]) {        hex = [hex[0]]        hex.push(defHexColor[1])      }      hex = hex.slice(0, 2)    } else if (typeof hex !== 'string') {      throw new Error('The value of `' + key + '` property must be a hex string, e.g.: FF0000')    }    _finalColors[key] = hex  }  _setTags(_finalColors)}/** * Reset colors. */ansiHTML.reset = function () {  _setTags(_defColors)}/** * Expose tags, including open and close. * @type {Object} */ansiHTML.tags = {}if (Object.defineProperty) {  Object.defineProperty(ansiHTML.tags, 'open', {    get: function () { return _openTags }  })  Object.defineProperty(ansiHTML.tags, 'close', {    get: function () { return _closeTags }  })} else {  ansiHTML.tags.open = _openTags  ansiHTML.tags.close = _closeTags}function _setTags (colors) {  // reset all  _openTags['0'] = 'font-weight:normal;opacity:1;color:#' + colors.reset[0] + ';background:#' + colors.reset[1]  // inverse  _openTags['7'] = 'color:#' + colors.reset[1] + ';background:#' + colors.reset[0]  // dark grey  _openTags['90'] = 'color:#' + colors.darkgrey  for (var code in _styles) {    var color = _styles[code]    var oriColor = colors[color] || '000'    _openTags[code] = 'color:#' + oriColor    code = parseInt(code)    _openTags[(code + 10).toString()] = 'background:#' + oriColor  }}ansiHTML.reset()
 @ (webpack)-dev-server/client/overlay.js 4:15-35
 @ (webpack)-dev-server/client?http://localhost:8081
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js
Child HtmlWebpackCompiler:
          Asset     Size  Chunks             Chunk Names
    img/dog.jpg  141 KiB          [emitted]
     + 1 hidden asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 464 bytes {HtmlWebpackPlugin_0} [built]
    [./src/img/dog.jpg] 57 bytes {HtmlWebpackPlugin_0} [built]
Child mini-css-extract-plugin ../9.使用 url-loader 处理图片\node_modules\css-loader\dist\cjs.js!../9.使用 url-loader 处理图片\src\index.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./src/index.css] 654 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/getUrl.js] 830 bytes {mini-css-extract-plugin} [built]
    [./src/img/background.jpg] 64 bytes {mini-css-extract-plugin} [built]
i ｢wdm｣: Failed to compile.

下面是配置文件的内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 为css里面携带的文件规定公共路径
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      },
      {
        test:/\.jpg|png|gif$/,
        use:{
          loader:'url-loader',
          options:{
            name:'img/[name].[ext]',
            esModule:false,
            // 10k以内的文件转成base64，js直接携带，10k以上的文件用file-load输出
            limit:10000
          }
        }
      },
      {
        // html-withimg-loader 用来处理html里的图片，比如img标签中的图片
        // html-withimg-loader只是把html里面的图片识别出来，最终还是file-loader去处理的
        test:/\.htm|html/,
        use:{
          loader:'html-withimg-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

// json文件内容

{
  "name": "webpack-js-img",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "dev":"webpack-dev-server --open chrome"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "html-withimg-loader": "^0.1.16",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}