WebPack包variables

我正在开发一个“小部件”，我正在使用Webpack，到目前为止一切正常。

但是，在这一点上，我想能够为我的用户提供主题，以便他们可以select他们想要的部件的颜色或位置

有没有办法在被注入之前将这个variables传递给bundle？

就像是

<script src="http://myAwesomeSite.com/js/bundle.js?theme=red"></script> 

Answer 1

您可以使用HTML Webpack插件来传递您想要在HTML中使用的variables。 在这种情况下，您将不得不将HTML转换为模板（例如，通过将文件的扩展名重命名为.ejs来将其转换为EJS模板）。

然后你可以如下放置所需的variables：

 <script src="http://myAwesomeSite.com/js/bundle.js?theme=<%= htmlWebpackPlugin.options.theme %>"></script> 

最后，你的webpackconfiguration文件插件列表应该包含HtmlWebpack插件：

 plugins: [ // ... new HtmlWebpackPlugin({ theme: 'red', template: './template_name.ejs', filename: './new_html_file_created.html' }), //... ],