Скопируйте и измените HTML-файл индекса при сборке с помощью веб-пакета

Question

Моя текущая структура файлов выглядит следующим образом

root/
  prod/
    index.html
    prod.js 
  webpack.config.js
  index.html
  bundle.js
  ...

bundle.js и prod.js, сгенерированные из разных сборок веб-пакетов (отдельные команды)

root/prod/index.html файл

<script src="./prod.js">

rest of the html tags

root/index.html файл

<script src="./bundle.js">

rest of the html tags

мне нужно каждый раз запускать сборку prod (собирает файлы в папке prod), копировать root/index.html в root/prod/index.html, но изменять

эта строка <script src="./bundle.js">

к этому <script src="./prod.js">

В настоящее время я использую copy-webpack-plug in, но у него нет возможности изменить файл при копировании

Есть какой-нибудь способ добиться такого поведения вместо того, чтобы каждый раз менять root/prod/index.html вручную (я имею в виду замену атрибута src тега script)?

моя текущая сборка webpack выглядит следующим образом

const path = require('path');
const fs = require('fs');
const gracefulFs = require('graceful-fs');
gracefulFs.gracefulify(fs);
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const entryPath = './entry-webpack.js';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


module.exports = (env) => {
  console.log('NODE_ENV: ', env.NODE_ENV);
  const ENV = env.NODE_ENV;
  let plugins = [];
  let enviroment;
  let bundleName;
  let exportPath;
  if (ENV === 'prod') {
    enviroment = 'production';
    plugins = [
      new UglifyJsPlugin({include: /\.min\.js$/}),
      new CopyPlugin([
        { from: 'index.html', to: './prod/index.html' }
      ])
    ];
    bundleName = 'prod';
    exportPath = './prod/[name].js';
  } else {
    enviroment = 'development';
    bundleName = 'bundle';
    exportPath = './[name].js';
  }

  return {
    context: path.join(__dirname, ''),
    mode: enviroment,
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
        },
        {
          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
          loader: 'url-loader?limit=100000',
        }
      ]
    },
    plugins,
    entry: {
      [bundleName]: entryPath,
    },
    output: {
      path: __dirname,
      filename: exportPath,
    }
  };
};

Answer 1

Не решение, а обходной путь, использующий webpack-shell-plugin

, добавляющий это в плагины веб-пакетов (выполняет все до и после сборки)

new WebpackShellPlugin(
  {
    onBuildStart:['echo "---Webpack Start---"'],
    onBuildEnd:['node replace-script']
  })

плюс replace-script.js скрипт

const fs = require('fs')
fs.readFile('./docs/index.html', 'utf8', (err, data) =>
    err ? console.log("ERROR" + err)
        : fs.writeFile(
            './docs/index.html',
            data.replace(`<script src="bundle.js">`, `<script src="prod.js"></script>`),
            'utf8',
            (err) =>
                err ? console.log("ERROR" + err)
                    : console.log("SUCCESS")
        )
);

лучшее решение без необходимости добавления нового скрипта будет высоко ценится