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

使用WebPack复制整个文件夹文件和子文件夹

1 个答案: