Webpack не находит пути для шрифтов и дистрибутивов - PullRequest
Новая
       20

Webpack не находит пути для шрифтов и дистрибутивов

0 голосов
/ 10 марта 2019

Итак, я недавно начал работать с Webpack, все работает нормально, кроме двух вещей:

  • Нет папки вывода dist
  • Webpack не распознает @ font-face относительныйpaths

Вот структура моего проекта:

folder structure

Вот мой webpack.config.js: 

const HtmlWebpackPlugin    = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack              = require('webpack');
const CopyWebpackPlugin    = require('copy-webpack-plugin');
const UglifyJSPlugin       = require('uglifyjs-webpack-plugin');
const path                = require('path');
require('dotenv').config();

const ENV = process.env.APP_ENV;
const isTest = ENV === 'test'
const isProd = ENV === 'prod';

function setDevTool() {  // function to set dev-tool depending on environment
  if (isTest) {
    return 'inline-source-map';
  } else if (isProd) {
    return 'source-map';
  } else {
    return 'eval-source-map';
  }
}

const config = {
  devtool: setDevTool(),
}

if (isProd) {
  config.plugins.push(
    new UglifyJSPlugin(),
    new CopyWebpackPlugin([{
      from: __dirname + '/assets/'
    }])
  );
}

module.exports = config;

module.exports = {
  entry: __dirname + "/src/js/index.js", // webpack entry point. Module to start building dependency graph
  output: {
    path: __dirname + '/dist/', // Folder to store generated bundle
    filename: 'bundle.js',  // Name of generated bundle after build
    publicPath: '/' // public URL of the output directory when referenced in a browser
  },
  resolve: {
    alias: {
      fonts: path.resolve(__dirname, '/assets/fonts')
    }
  },
  module: {  // where we defined file patterns and their loaders
      rules: [
        {
          test: /\.js$/,
          use: 'babel-loader',
          exclude: [
            /node_modules/
          ]
        },
        {
          test: /\.(sass|scss)/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            }
          ],
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /\.(ttf|eot|woff|woff2)$/,
          use: {
            loader: "file-loader",
            options: {
              name: "fonts/[name].[ext]",
              outputPath: 'fonts/'
            },
          }
        }
      ]
  },
  plugins: [  // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
          template: __dirname + "/index.html",
          inject: 'body'
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
      }),
      new webpack.DefinePlugin({
        API_KEY: JSON.stringify(process.env.API_KEY)
      })
  ],
  devServer: {  // configuration for webpack-dev-server
      contentBase: './assets',  //source of static assets
      port: 7700, // port to run dev-server
  }
};

Итак, я загружаю шрифты вот так: 

@font-face {
font-family: 'Metropolis';
src: url('../../../assets/fonts/metropolis/Metropolis-Medium.woff2') format('woff2'),
   url('../../../assets/fonts/metropolis/Metropolis-Medium.woff') format('woff'),
   url('../../../assets/fonts/metropolis/Metropolis-Medium.ttf') format('truetype');
}

Вот вывод, когда я запускаю webpack-dev-server --history-api-fallback --inline --progress

terminal output

Я пробовал так много учебных пособий, и самостоятельно, даже псевдонимы не работают.

1 Ответ

0 голосов
/ 11 марта 2019

Ответы:

  1. Папка dist отсутствует - вы используете webpack-dev-server, она подходит только для разработчиков, имеет оптимизацию производительности, которая "сохраняет" файлы в памяти (а не на диске). Чтобы получить к ним доступ, вы можете адресовать свои активы в http://localhost:7700/bundle.js (относится только к вашей конфигурации).

Есть еще один вариант, использовать write-file-webpack-plugin, который заставит dev-сервер записывать на диск, это отключит выигрыш в производительности.

  1. Что касается второго вопроса, webpack разрешает дерево зависимостей require и директиву css url(), каждое такое требование должно быть относительно его родителя, поэтому, в вашем случае, путь к файлу шрифта должен быть относительно файла css, который «требует» этого.
...