javascript - 在 webpack 中使用导入内联单个 javascript 文件

Question

我需要在我的 index.html 中嵌入一些 javascript。 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 知道它们，但这并没有什么不同。

是否可以使用 webpack 仅内联一个 javascript 文件(包括导入文件)？

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$'

请注意，由于缩小，您可能无法调用任何内联函数。