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

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

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

Inline a single javascript file with imports in webpack

javascript

inline

webpack

html-webpack-plugin

webpack-4