Как загружать CSS assets из NPM используя Webpack?

Question

[coderlex]

Используя Webpack можно подключать ресурсы из non-web-accessible директории (такой как node_modules). Насколько я понимаю, это делается, например, с помощью file-loader, который копирует файлы в public директорию и возвращает url на скопированный ресурс. Но что делать, если нужно подключить, например, font-awesome, пути шрифтов которого прописаны в CSS файле?

Answer 1

[Алексей Немиро]

Для Bootstrap и Font Awesome есть отдельные загрузчики: bootstrap-loader и font-awesome-loader.

Достаточно просто добавить их в секцию devDependencies в package.json.

В коде инициализации приложения подключить, например так:

require('bootstrap-loader');
require('font-awesome-loader');

Для шрифтов, в webpack.config.js, прописать примерно такие правила:

module {
  loaders: [
    {
      test: /\.woff(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]' // путь output, куда будут скопированы файлы
      }
    },
    {
      test: /\.woff2(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/font-woff',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.ttf(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'application/octet-stream',
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.eot(.*)$/,
      loader: 'file',
      query: {
        limit: 10000,
        name: 'fonts/[name].[ext]'
      }
    },
    {
      test: /\.svg(.*)$/,
      loader: 'url',
      query: {
        limit: 10000,
        mimetype: 'image/svg+xml',
        name: 'fonts/[name].[ext]'
      }
    }
  ]
}

Если понадобится выделить CSS из JavaScript, то можно использовать extract-text-webpack-plugin.

webpack.config.js:

var extractTextPlugin = require('extract-text-webpack-plugin');
// ...
module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.scss$/, // для scss
        loader: extractTextPlugin.extract('style', 'css!sass')
      }
    ]
  },

  plugins: [
    new extractTextPlugin('bundle.css') // вынести css в файл bundle.css в папку output
  ]
}

Для копирования других статичных файлов можно использовать copy-webpack-plugin.