WebPack包變量

Question

我正在開發一個「小部件」，我正在使用Webpack，並且所有工作都很順利。

但是，在這一點上我想能夠提供的主題，我的用戶，以便他們可以選擇他們想要用於微

的顏色和位置，有沒有辦法是之前該變量傳遞給包注射？

像

<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' 
    }), 
    //... 
    ],