Mini-css-extract-plugin - как определить хеш-имя на index.html

Сейчас я пытаюсь реализовать mini-css-extract-plugin.

Мне не удается реализовать хеш-именование, когда я использую его, я не знаю, как заставить мой файл index.html определять конкретное имя на лету.

Если у кого-то есть идеи, было бы здорово. Спасибо.

Вот мой webpack.config.js:

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'styles.[contenthash].css'
    })
  ],
module: {
   rules: [ {
     test: /\.js|jsx$/,
     exclude: /node_modules/,
   include: path.resolve(__dirname, "src"),
     use: [
       {
   loader: "babel-loader",
   options: {
     presets: ["es2015", "stage-1", "react"]
   }
       }
     ]
   },

   {
   test: /\.css$/,
   use: [{
     loader: MiniCssExtractPlugin.loader,
     options: {
       publicPath: "./public"
     }
   }, {
     loader: "css-loader"
   }]
 }

]},

вот мой index.html:

<link rel = "stylesheet" href = "styles.css">

как перевести в мой HTML часть "[contenthash]" моего файла css?

css reactjs plugins webpack.config.js

15.05.2018 02:50

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

843

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать html-webpack-plugin для внедрения css во время сборки, он поддерживает хэш-именование и позволяет вам предоставить свой собственный template.

фактически, в документации указано: (html-webpack-plugin) - это плагин для веб-пакетов, который упрощает создание файлов HTML для обслуживания пакетов веб-пакетов. Это особенно полезно для пакетов веб-пакетов, которые включают в себя хэш в имени файла, который изменяет каждую компиляцию.

— 15.05.2018 18:15

15.05.2018 07:06

Ответ принят как подходящий

Вот мое основное понимание html-webpack-плагин (далее HWP).

Похоже, что HWP создает своего рода мета-пакет, в котором все пакеты объединены. Загруженные вами пакеты CSS, JS, HTML будут перегруппированы в созданный файл HWP.

Ссылки на каждый загруженный файл будут автоматически добавлены в ваш пакет HWP.

Имейте в виду, что тело файла HWP состоит из любого текста, так как же достичь элементов HTML DOM в этих условиях? *

Если вы используете Reactjs или другую библиотеку JavaScript для создания пользовательских интерфейсов, вам нужно будет достичь некоторых элементов DOM. Чтобы включить эти элементы DOM в свой HWP, вам нужно просто загрузить файл шаблон. Содержимое этого шаблона будет включено в ваш пакет HWP. Таким образом, вы сохраняете доступ к своим элементам DOM и отлично справляетесь со своим HTML-кодом.

Чтобы создать шаблон, введите эти параметры в свой webpack.config.js:

  plugins: [
           new HtmlWebpackPlugin({
            (...)
              template:  "path to your template.html",
            (...)                  
            })
  ];

Имейте в виду, что на ваш путь будет влиять контекст вашего webpack.config.js.

Решать тебе сейчас

15.05.2018 20:41