Javascript 网页包-文件加载器不工作（无法在我的html中动态加载svg文件）_Javascript_Html_Node.js_Npm_Webpack

Javascript 网页包-文件加载器不工作（无法在我的html中动态加载svg文件）

javascript html node.js npm webpack

Javascript 网页包-文件加载器不工作（无法在我的html中动态加载svg文件）,javascript,html,node.js,npm,webpack,Javascript,Html,Node.js,Npm,Webpack,package.json: { "name": "webpackTutorial", "version": "1.0.0", "private": true, "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --config webpack.dev.js --open", "build": "webpack --config webpack.p

package.json:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

webpack.common.js:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

webpack.dev.js:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

webpack.prod.js:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

Html:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

您的图像具有扩展名

jpeg

，但没有相应的规则

test://\（svg | png | jpg | gif）$/

将其更改为

test://\（svg | png | jpe | g | gif）$/

或

test://\（svg | png | jpg | jpg | gif）$/

我更改了它：

{test test://\（svg | png | jpg | gif）$/，使用：{加载器：“文件加载器”，选项：{名称：“[name:[name].[hash].[ext path]，[imutgs}

因此不再有错误消息，但我得到了这个消息<代码>因此不起作用我从命令行

imgs/webpackImage.bad207360b17088a7d31eb8b64674910.jpeg中获取哈希值，并粘贴到html中图像的src中，它起作用了。但你能解释一下这是否合法吗？为什么当我捆绑它时，它给出的是[对象模块]，而不是我想要的？@背叛我认为这篇文章可以回答你们问题的第二部分