Добавьте файл JavaScript в сборку Webpack без использования Manifest

Question

У меня есть простое приложение webpack, index.html, main.js, которое прекрасно собирается.

У меня также есть автономный файл javascript iframe.js, который будет добавлен на сторонние сайты, которые будутдобавить контейнер iframe со ссылкой на приложение webpack:

<iframe src="https://webpack-app-domain.com/index.html">

Я бы хотел, чтобы сборка webpack обрабатывала iframe.js с подстановками process.env вида:

<%= process.env.IFRAME_URL %>

и позволяла babelпреобразовать его в ES5 javascript и минимизировать выходные данные для производства, но я НЕ хочу, чтобы iframe.js был частью Манифеста или других зависимостей, введенных в сценарий.

Это не «запись» веб-пакета.

Если я помещу его в папку / static, он будет развернут, неизменен, но я не смогу затем настроить его для каких-либо переменных process.env, ни перенести, ни свернуть его.

Если я добавлюон как отдельная «запись» веб-пакета, он переносится и минимизируется, но также оборачивается вызовом манифеста: webpackJsonp (), но мне нужно, чтобы JavaScript был автономным.

Какn Я обрабатываю этот файл javascript вместе со сборкой webpack, чтобы удовлетворить мои требования?

Редактировать: Спасибо за ваши ответы.Я применил встроенное преобразование с помощью CopyWebpackPlugin для достижения желаемого результата:

const UglifyJS = require('uglify-js')
const babel = require("babel-core")

...

new CopyWebpackPlugin([
  {
    from: 'src/iframe.js',
    to: '',
    transform(content, path) {
      let js = content.toString('utf8')
      js = js.replace(new RegExp("process.env.IFRAME_URL", 'g'), env.IFRAME_URL)
        .replace(new RegExp("process.env.ROOT_API", 'g'), env.ROOT_API)
      let t = babel.transform(js, {
        presets: ["env"]
      })
      if (t.error) throw t.error
      js = t.code
      let min = UglifyJS.minify(js)
      if (min.error) throw min.error
      js = min.code.toString()
      return Buffer.from(js)
    },
  },
])

Я не уверен, что это самый элегантный способ, но он выполняет свою работу.Он дублирует конвейер плагина, который в противном случае обойден.

Answer 1

Вы пытались использовать copy-webpack-plugin ?

Таким образом, вы выполняете обычную сборку параллельно с копированием одного файла. Вы можете использовать метод transform, чтобы заменить содержимое файла на process.env.* и вывести его в нужное место назначения.

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      {
        from: 'src/*.png',
        to: 'dest/',
        transform(content, path) {
          return optimize(content);
        },
      },
    ]),
  ],
};

Answer 2

Я не вижу, где manifest.json относится к этому вопросу.

Мой ответ: используйте externals в сочетании с пользовательской командой для отдельной сборки веб-пакета.Весьма часто иметь в проекте более одного шага компиляции.

Если вы используете package.json, вы можете добавить это в раздел scripts, а если вы используете командную строку, то простосценарий оболочки или что-то.

NODE_ENV=some_env webpack --config webpack.iframe.config.js --progress --colors -d --output-path 'assets' --display verbose

Затем вы можете отделить сборку зависимостей от сборки проекта и включить результаты как внешние в ваш основной проект.