HtmlWebPackPlugin注入位置

开发服务器，我的webpack将构建我的捆绑包，其中包括jQuery。HtmlWebPackPlugin注入位置

我使用html-webpack-plugin，下面的代码行会在构建prod时将我的包注入到body中。

new HtmlWebPackPlugin({ 
      template: './src/index.html' 
     }),

我的问题是，在我的index.html，我语义ui.js，它依赖于jQuery的，

<body> 
     <my-app>loading...thaison</my-app> 

     <script src="./asset/semantic-ui/dist/semantic.min.js"></script>  
    </body>

所以，当我火我的开发环境或督促建设，出现包语义之后，因此我有一个错误。我如何制作以便在我的手动脚本源之前进行开发注入？

开发服务器服务：

webpack-dev-server --inline --progress --port 4000 --content-base src

来源

2016-09-29 chungtinhlakho

这是因为你使用的标记之前的JS默认注射位置。我解决这个问题的一种方法是：

在HtmlWebPackPlugin config中将注入设置为false。
添加一个注射点的指数（EJS）模板：下面

代码：

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%> 
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script> 
<% } %>

您可以添加你喜欢的指数模板这在任何地方，从而避免它在被注入结束。

您可以在“Writing your own templates”部分阅读有关模板中可用选项的更多信息。例如，您可能想要访问文件块，而不是原始文件列表。

来源

2017-08-08 14:40:13

HtmlWebPackPlugin注入位置

回答

相关问题