CODEWITHSUNDEEP
webpack
Miguel Moura
Miguel Moura

Reputation: 39374

Copy entire folder files and subfolders using WebPack

On a styles.less I have the following:

@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

And in scripts.js I am importing the files:

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

When building it with Webpack I get an error saying the sourcesanspro are not found.

The WebPack configuration I am using is as follows:

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'
            },
          },
        ],
      }
    ]
  }

};

In the last modules' rule I am using file-loader to copy assets folder.

But the folder is not being copied and I still get the errors ...

What am I doing wrong?

Upvotes: 0

Views: 66

Answers (1)

Siri
Siri

Reputation: 1126

Looks like some fonts are imported in the css/less files for which you will have to use the appropriate loaders.

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

Also, if you want to copy entire folders, please have a look at https://github.com/webpack-contrib/copy-webpack-plugin

Upvotes: 1

Related Questions