Как избежать жесткого кодирования имени файла? - PullRequest
Новая
       44

Как избежать жесткого кодирования имени файла?

0 голосов
/ 09 июня 2018

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

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "style.css"
            }
          },
          { loader: "extract-loader" },
          { loader: "css-loader",
            options: {
              minimize: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer({ grid: false })]
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name][hash].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new CopyWebpackPlugin([
      {
        from: "public"
      }
    ]),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Модуль SCSS, я использую загрузчик файлов для генерации файла style.css.Содержимое index.html: 

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="main.css">

    <title>Cockpit</title>

</head>

<body class="mdc-typography">


    <button class="mdc-button">
        Button
    </button>

</body>

</html>

Как видите, файл таблицы стилей жестко закодирован, но я хочу, чтобы он автоматически вставлялся в index.html.Как это сделать с html-webpack-plugin?

1 Ответ

0 голосов
/ 09 июня 2018

Попробуйте использовать HtmlWebpackIncludeAssetsPlugin. 

plugins: [
  new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
  }),
  new CopyWebpackPlugin([
    {
      from: "public"
    }
  ]),
  new HtmlWebpackIncludeAssetsPlugin({
    assets: ['style.css'],
    append: true
  }),
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

Возможны многие и многие другие варианты, см. Здесь: https://github.com/jharris4/html-webpack-include-assets-plugin

...