Ответы пользователя по тегу npm
  • Как загружать CSS assets из NPM используя Webpack?

    AlekseyNemiro
    @AlekseyNemiro
    full-stack developer
    Для 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.
    Ответ написан
    Комментировать