WebPack包变量

Question

我正在开发一个＆＃34;小部件＆＃34;我正在使用Webpack，到目前为止一切正常。

但是，此时我希望能够为我的用户提供主题，以便他们可以选择他们想要的小部件颜色或位置

有没有办法在注入之前将这些变量传递给bundle？

类似

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

Answer 1

您可以使用HTML Webpack Plugin传递要在HTML中使用的变量。在这种情况下，您必须将HTML转换为模板（例如，通过将文件的扩展名重命名为 .ejs 来转换为EJS模板）。

然后您可以按如下方式放置所需的变量：

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

最后，您的webpack配置文件插件列表应该包含HtmlWebpack插件：

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