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文件

1 个答案: