Скопируйте целые файлы папок и подпапок, используя WebPack

Question

На styles.less у меня есть следующее:

@import (reference) 'reset.less';

@font-face {
    font-family: sourcesanspro;
    src: url('./assets/sourcesanspro.eot');
    src: url('./assets/sourcesanspro.woff') format('woff'), 
         url('./assets/sourcesanspro.ttf') format('truetype')
} // @font-face

А в scripts.js я импортирую файлы:

import '../styles/reset.less';
import '../styles/styles.less';

При сборке с Webpack я получаю сообщение об ошибке, что sourcesanspro не найден.

Конфигурация WebPack, которую я использую, выглядит следующим образом:

const webpack = require('webpack');

var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.min.css',
    })
  ],

  resolve: {
    extensions: ['.js'],
  },

  entry: {
    'scripts.min': __dirname + '/src/scripts/scripts.js',
  },  

  output: {
    path:  __dirname + '/dist',
    filename: '[name].js'
  },

  optimization: {
    minimizer: [
      new MiniCssExtractPlugin({}),
      new OptimizeCSSAssetsPlugin({}),      
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      })
    ]
  },

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: __dirname + '/src/assets',
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: __dirname + '/dist/assets'
            },
          },
        ],
      }
    ]
  }

};

В последнем правиле модулей я использую file-loader для копирования папки assets.

Но папка не копируется, и я все еще получаю ошибки ...

Что я делаю не так?

Answer 1

Похоже, что некоторые шрифты импортируются в файлы css / less, для которых вам придется использовать соответствующие загрузчики.

  { test: /\.(woff|woff2|ttf|eot)$/, loader: 'file-loader', options: { name: 'fonts/[name].[ext]' } },

Кроме того, если вы хотите скопировать целые папки, посмотрите https://github.com/webpack-contrib/copy-webpack-plugin