2016-09-29 4 views
1

dev-server, мой веб-пакет будет строить мой пакет, который включает jquery.HtmlWebPackPlugin место инъекции

Я использую html-webpack-plugin, строка кода ниже вводит мой узел в тело при создании prod.

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> 

Так что, когда я огонь моей Dev среды или лезвием сборки, появляется расслоение после семантики, следовательно, у меня есть ошибка. Как сделать так, чтобы инъекция dev произошла до моего исходного файла скрипта?

DEV сервер служит:

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

ответ

0

Это происходит потому, что вы используете расположение впрыска по умолчанию для JS непосредственно перед тегом. Один из способов, котор я адресовал это:

  1. Установка впрыскивается в false в HtmlWebPackPlugin config.
  2. Добавление точки впрыска к индексу (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». Возможно, вы захотите получить доступ к фрагментам файлов, а не к необработанному списку файлов, например.