Question

dev-server，我的webpack将构建包含jquery的包。

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

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

我的问题是，在我的index.html中，我是semantic-ui.js，它依赖于Jquery，

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

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

因此，当我激活我的开发环境或prod构建时，捆绑在语义之后出现，因此我有一个错误。我如何制作是为了在我的手动脚本源之前进行开发注入？

开发服务器服务：

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

Answer 1

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

在HtmlWebPackPlugin config。
向索引（ejs）模板添加注入点：

以下代码：

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

您可以在您喜欢的索引模板中的任何位置添加它，因此避免在最后注入它。

您可以在＆＃34; Writing your own templates＆＃34;中详细了解模板中可用的选项。部分。例如，您可能希望访问文件块而不是原始文件列表。

HtmlWebPackPlugin注入位置

1 个答案: