使用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构建它时，我会发现一个错误，说找不到来源。

我正在使用的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/SILL文件中导入，您必须使用适当的加载程序。

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

另外，如果要复制整个文件夹，请查看https://github.com/webpack-contrib/copy-webpack-plugin