2

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

我使用 html-webpack-plugin，下面的代码行将在构建产品时将我的包注入主体。 

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
4

1 回答 1

4

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

  1. 在HtmlWebPackPlugin 配置中将注入设置为 false 。
  2. 向索引 (ejs) 模板添加注入点：

下面的代码：

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

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

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

于 2017-08-08T14:40:13.497 回答