如何用新插件替换 less-loader 中已弃用的 javascriptEnabled 选项

Question

我需要对我的 less 文件使用内联 js，并且之前有一个 webpack 配置，其中包含类似这样的内容来启用内联 js：

module.exports = {
  ...
  module: {
    ...
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader',
            options: { javascriptEnabled: true },
          },
        ],
      },
    ],
  },
};

然而，该javascriptEnabled选项已被弃用，替代方案是使用语法@plugin并使用 js 插件。然而，我对文档以及如何准确地实现插件以及应该在我的 webpack 配置中实现哪个插件来替换这个现在已弃用的选项感到有点困惑，这样我仍然可以使用内联 js。我该怎么做呢？谢谢。

Answer 1

出于安全考虑，内联 JavaScript 已被弃用。它很容易受到代码注入的攻击。因此强烈建议不要使用内联 JavaScript。

如果你真的很想使用它，你可以使用之前被弃用的旧版本javascriptEnabled，但我认为答案太简单了。这是这样的。

我做了一些研究，我想你plugins从这个问题中得到了可以使用的想法。我的猜测是，作者在这里并不是想用插件替换javascriptEnabledfrom来实现类似的编写内联 javascript 的方式。我猜他的意思是出于安全原因，每一段内联 JavaScript 都应该重写为 a 。less-loaderwebpackless plugin

如果你这样想的话，这些文档就会突然变得更有意义。

您可以将内联 javascript 替换为不同的Less plugins内容，如您提供的文档所示：

// my-plugin.js
install: function(less, pluginManager, functions) {
    functions.add('pi', function() {
        return Math.PI;
    });
}
// etc

如果您要在样式表中使用它：

@plugin "my-plugin";
.show-me-pi {
  value: pi();
}

你会得到：

.show-me-pi {
  value: 3.141592653589793;
}