Как просто загрузить изображения с атрибутом sr c в webpack 4? - PullRequest
Новая
       4

Как просто загрузить изображения с атрибутом sr c в webpack 4?

2 голосов
/ 19 февраля 2020

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

Webpack.config. js файл: 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
entry: {
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "../build"),
filename: "[name].bundle.js"
},
mode: "development",
devServer: {
contentBase: path.join(__dirname, "../build"),
compress: true,
port: 3000,
overlay: true
},
devtool: "cheap-module-eval-source-map",
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader" // transpiling our JavaScript files using Babel and webpack
    }
  },
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      "style-loader", // creates style nodes from JS strings
      "css-loader", // translates CSS into CommonJS
      "postcss-loader", // Loader for webpack to process CSS with PostCSS
      "sass-loader" // compiles Sass to CSS, using Node Sass by default
    ]
  },
  {
    test: /\.(png|svg|jpe?g|gif)$/,
    use: [
      {
        loader: "file-loader", // This will resolves import/require() on a file into a url 
and emits the file into the output directory.
        options: {
          name: "[name].[ext]",
          outputPath: "assets",
        }
      },
    ]
  },
  {
    test: /\.html$/,
    use: {
      loader: "html-loader",
      options: {
        attrs: ["img:src", ":data-src"],
        minimize: true
      }
    }
  }
]
},

plugins: [
  // CleanWebpackPlugin will do some clean up/remove folder before build
  // In this case, this plugin will remove 'dist' and 'build' folder before re-build again
  new CleanWebpackPlugin(),
  // The plugin will generate an HTML5 file for you that includes all your webpack bundles 
in 
the body using script tags
new HtmlWebpackPlugin({
  template: "./src/index.html",
  filename: "index.html"
}),

Перед этим проектом я смог сделать так, чтобы изображения просто загружались с HTML, но теперь по иронии судьбы я застрял и не могу заставить это работать.

Любая помощь будет очень ценной.

При загрузке изображения непосредственно из HTML я получаю следующую ошибку: 

 Error: Child compilation failed:
 Module not found: Error: Can't resolve ' 
 ./src/assets/images/portret.jpg' in '/home/viktoras/www/sites/painter-new/src':

1 Ответ

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

Вы можете сделать это: 

<img src="<%=require('./src/assets/logo.png')%>">

    Plugin Conf
    $new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html'
      }),
...