webpack динамически устанавливает источник изображения с html -загрузчик не работает - PullRequest
Новая
       66

webpack динамически устанавливает источник изображения с html -загрузчик не работает

0 голосов
/ 06 февраля 2020

Я изучаю веб-пакет и пытаюсь загрузить изображения, генерирующие динамический c URL-адрес для атрибута 'sr c' при создании проекта, но не работает, URL-адрес, сгенерированный в файле внутри dist папка такая же, как и до сборки.

мой начальный шаблон 

<!DOCTYPE html>
<html lang="pt">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content=" 
    {{htmlWebpackPlugin.options.viewport}}">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="description" content=" 
  {{htmlWebpackPlugin.options.description}}" />
    <title>{{htmlWebpackPlugin.options.title}}</title>
     <link href="https://fonts.googleapis.com/css? 
       family=Orbitron:400,500,600,700&display=swap" rel="stylesheet">

    </head>

   <body>

    <main>
        <div class="overview">
           <img src="./assets/img/cover.jpg" alt="">
        </div>

    </main>
</body>

</html>

мой webpack.config. js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
     CleanWebpackPlugin
     } = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");

 module.exports = {
 entry: {
      index: "./src/mvc/controllers/index.js"
  },
 output: {
 path: path.resolve(__dirname, "dist"),
 filename: "assets/js/[name].[contenthash].js"
 },
devServer: {
  contentBase: path.join(__dirname, "dist"),
  port: 9000
},
mode: "none",
plugins: [
    new TerserPlugin(),
    new MiniCssExtractPlugin({
     filename: "assets/css/[name].[contenthash].css"
   }),
   new CleanWebpackPlugin(),
   new HtmlWebpackPlugin({
       filename: "index.html",
       chunks: ["index"],
       title: "página index",
       description: "index page test",
       template: "./src/page-template.hbs",
      meta: {
         viewport: "width=device-width, initial-scale=1.0"
        }
       })
      ],
   module: {
   rules: [{
         test: /\.js$/,
       //Não executar Babel no diretório node_modules
          exclude: /(node_modules)/,
         use: {
          loader: "babel-loader",
          options: {
           // preset-env optimiza o código para a maioria dos browsers
            presets: ["@babel/preset-env"]
         }
       }
       },
      {
        test: /\.html$/i,
        loader: 'html-loader',
     },
     {
       test: /\.(png|jpg)$/i,
    use: [{
      loader: "file-loader",
      options: {
        limit: 8000,
        name: "[name].[hash].[ext]",
        outputPath: "assets/img"
      }
    }]
  },

  {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, "css-loader"]
  },
  {
    test: /\.hbs$/,
    use: ["handlebars-loader"]
  },
  {
    test: /font-awesome\.config\.js/,
    use: [{
        loader: "style-loader"
      },
      {
        loader: "font-awesome-loader"
      }
    ]
  },
  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [{
      loader: "file-loader",
      options: {
        name: "[name].[ext]",
        // diretório onde as fonts são guardadas
        outputPath: "fonts/"
      }
    }]
  }
  ]
 }
 };

мой пакет. json

 {
    "name": "webpack_boiler",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
   "scripts": {
       "build": "./node_modules/.bin/webpack",
       "dev": "./node_modules/.bin/webpack-dev-server",
       "server": "nodemon ./src/server/index.js"
    },
     "author": "",
    "license": "ISC",
    "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "bulma": "^0.8.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "extract-loader": "^4.0.3",
    "file-loader": "^5.0.2",
    "font-awesome-loader": "^1.0.2",
     "html-loader": "^0.5.5",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "nodemon": "^2.0.2",
   "sass-loader": "^8.0.2",
   "style-loader": "^1.1.3",
   "terser-webpack-plugin": "^2.3.2",
   "url-loader": "^3.0.0",
   "webpack": "^4.41.5",
   "webpack-cli": "^3.3.10",
   "webpack-dev-server": "^3.10.1"
   },
   "dependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
   "babel-loader": "^8.0.6",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
     "express": "^4.17.1",
    "express-rate-limit": "^5.0.0",
    "handlebars": "^4.7.2",
    "handlebars-loader": "^1.7.1",
    "helmet": "^3.21.2",
    "html-webpack-plugin": "^3.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.8.9",
    "validator": "^12.1.0",
    "xss-clean": "^0.1.1"
  }
 }

шаблон после сборки 

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="description" content="index page test" />
    <title>página index</title>
     <link href="https://fonts.googleapis.com/css? 
        family=Orbitron:400,500,600,700&display=swap" rel="stylesheet">

        <meta name="viewport" content="width=device-width, initial- 
       scale=1.0"><link 
   href="assets/css/index.9977d6a001172c55b58c.css" rel="stylesheet"> 
</head>

 <body>

    <main>
        <div class="overview">
            <img src="./assets/img/cover.jpg" alt="">
        </div>

    </main>
 <script type="text/javascript" 
 src="assets/js/index.70448e9d3ff0906e8f31.js"></script></body>

  </html>

URL-адрес не был сгенерирован динамически, имя файла такое же, как и раньше, и я хэширую имя.

...