Webpack2 эквивалент тегов HTML-тегов?

Question

Я скачал модуль НПМ, который рекомендует добавить:

<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" /> 
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script> 

На мой файл index.html.

Есть ли способ, которым я могу потребовать те же ссылки с Webpack 2 от углового компонента?

например.

import 'ng2-toastr.min.js' 

в комплекте?

Answer 1

Совет, приведенный в инструкциях, является странным. Вам не нужно будет когда-либо включать тег <script>, так как вы используете webpack, скрипт автоматически загрузится для вас как часть вашего пакета webpack.

Что касается css, вы можете использовать webpack для этого. Сначала вам нужно будет установить соответствующие погрузчики, чтобы иметь возможность загрузить файл css и применить стили к йотам:

npm install --save style-loader raw-loader 

Тогда где-то в вашей машинописи файлах вы можете сделать:

import 'style!raw!../node_modules/ng2-toastr/ng2-toastr.css' 

(обратите внимание, что относительный путь к ../node_modules может отличаться в зависимости от уровня вложенности в приложении.

style! в и raw! префиксы инструкции по WebPack к обработать данный скрипт через «loaeers».

raw загрузчик просто прочитать в файле CSS, как это не пытается сделать какой-либо дальнейшей обработки (вы можете использовать css! загрузчик, если вам нужно сделать additioanl вещи, как @import из файла .css, но в данном случае это не необходимо, так что проще всего сырьевой погрузчик.

style погрузчик принимает CSS, нагруженный raw погрузчика и программно применяет его к текущей странице РОМУ. это на самом деле не создать <style> тег с src="url....", но она достигает важная часть, которая заключается в том, чтобы убедиться, что стили загруженного css загружены на страницу.

Если вам нужно сделать, это часто, вы всегда можете добавить загрузчик конфигурации к вашему webpack.config.js:

module: { 
    loaders: [ 
    {test: /\.tsx?$/, loader: 'ts-loader'}, 
    {test: /\.css$/, loader:'style!raw'} 
    ] 
} 

Тогда вы можете просто сделать:

import '../node_modules/ng2-toastr/ng2-toastr.css'