Mini-css-extract-plugin - как получить хэш-имя для index.html

Я пытаюсь в настоящее время реализовать мини-CSS-Extract-плагин.

Я не могу реализовать хэширование, когда я его использую, я не знаю, как привести мой файл 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?

Источник

2 ответа

Решение

Здесь мое основное понимание html-webpack-plugin (после 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.

Теперь тебе решать

Источник

Ты можешь использовать html-webpack-plugin для того, чтобы внедрить CSS во время сборки, он поддерживает костюм именования хешей и позволяет вам предоставить свой собственный template,

Источник
Другие вопросы по тегам