Неправильные пути к изображениям в веб-пакете для HTML-файлов подпапок - PullRequest
Новая
       25

Неправильные пути к изображениям в веб-пакете для HTML-файлов подпапок

0 голосов
/ 05 ноября 2019

Используя следующую конфигурацию webpack , все файлы HTML получают пути к изображениям одинаково нечетко, поскольку они находятся на корневом уровне или в подпапке.

Текущий вывод:

  • . / Index.html, <img src="img/sn.svg">
  • . / About / index.html, <img src="img/sn.svg"> (вместо .. / img / sn.svg)
  • . / Img / sn.svg

Я предполагаю, что пути к изображениям сначала обновляются в файлах HTML, а затемплагин HtmlWebpackPlugin перемещает эти файлы в соответствующие папки, предоставленные в методе htmlPlugins () . 

    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
    const webpack = require("webpack");
    const path = require("path");
    const glob = require("glob");

    function htmlPlugins() {
      return glob
        .sync('./html/**/index.html')
        .map(item => {
          var dir = path.dirname(item);
          var newPath = dir.substr(dir.indexOf('/html') + 8);
          return new HtmlWebpackPlugin({
            hash: true,
            filename: newPath === '' ? 'index.html' : `${newPath}/index.html`,
            template: path.resolve(__dirname, `${item}`)
          });
        });
    };

    // Plugins configuration
    let buildPath = path.resolve(__dirname, "dist");
    let cleanOptions = {
      root: __dirname,
      verbose: true
    };

    // Webpack configuration
    module.exports = {
      entry: glob.sync("./assets/dep.js"),
      mode: "development",
      output: {
        path: buildPath,
        filename: "app.js"
      },
      module: {
        rules: [
          {
            test: /\.html$/,
            use: { loader: "html-loader?interpolate" }
          },
          {
            test: /\.(scss|css)$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
          },
          {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'img'
              }
            }
          },
          {
              test: require.resolve("jquery-migrate"),
              use: "imports-loader?define=>false",
          },
          {
            test: /\.(ttf|eot|woff|woff2)$/,
            use: {
              loader: "file-loader",
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts'
              }
            }
          },
          {
            test: /(sitemap.xml|robots.txt|favicon.ico)/,
            use: ["file-loader?name=[name].[ext]"]
          }
        ]
      },
      plugins: [
        new CleanWebpackPlugin(buildPath, cleanOptions),
        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }),
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        }),
        new BrowserSyncPlugin({
          host: 'localhost',
          port: 3000,
          server: { baseDir: ['dist'] }
        })
      ].concat(htmlPlugins())
    };

Версии: webpack: 4.41.2 и html-webpack-плагин: 3.2.0

...