Встроить один файл JavaScript с импортом в веб-пакет

Question

Мне нужно добавить немного javascript в мой index.html.JS по существу:

import smallFunction from './smallFunction';
const name = smallFunction();
document.querySelector('#id').setAttribute('href', `/path/${name}.${__webpack_hash__}.css`);

Я использую webpack 4 с HtmlWebpackPlugin и webpack.ExtendedAPIPlugin.При использовании HtmlWebpackInlineSourcePlugin он либо вставляет весь мой js-пакет:

inlineSource: '.js$'

, либо ничего не указывает на одно из следующих:

inlineSource: 'myFile.js$'

inlineSource: './path/myFile.js$'

Я также пытался ссылаться на файлыиз моей точки входа javascript, чтобы убедиться, что webpack знает о них, но это ничего не меняет.

Можно ли встроить только один файл javascript (включая импорт) с помощью webpack?

Answer 1

Это возможно, если использовать myFile в качестве дополнительной точки входа.

Это позволяет inlineSource обнаруживать его и позволяет использовать ваш текущий стек загрузчика (например, перемещение babel).

Обратите внимание, что inlineSource - это регулярное выражение в строковой форме.

// Entry points
entry: {
  main: './src/main.js',
  // Separate entry point for inlined js
  injectCss: './src/js/injectBrandCss.js'
}

// HtmlWebpackPlugin options
inlineSource: 'myFile.*\.js$'

Обратите внимание, что вы не сможете вызывать какие-либо встроенные функции из-за минимизации.